@elastic/eui 63.0.3 → 65.0.0

package/es/components/accessibility/screen_reader_live/screen_reader_live.js

@@ -68,12 +68,12 @@ export var EuiScreenReaderLive = function EuiScreenReaderLive(_ref) {
       // double announcements from VO when `focusRegionOnTextChange` is true
       ,
       "aria-hidden": toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": !toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && toggle ? children : ''), ___EmotionJSX("div", {
       role: role,
       "aria-atomic": "true",
       "aria-hidden": !toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && !toggle ? children : '')))
   );
 };

package/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js

@@ -6,13 +6,14 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS } from '../../../global_styling';
 /*
  * Mixin that hides elements offscreen to only be read by screen reader
  * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
  */
 
 export var euiScreenReaderOnly = function euiScreenReaderOnly() {
-  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  top: auto;\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  left: -10000px;\n  // The element must have a size (for some screen readers)\n  width: 1px;\n  height: 1px;\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n";
+  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  ".concat(logicalCSS('top', 'auto'), "\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  ").concat(logicalCSS('left', '-10000px'), "\n  // The element must have a size (for some screen readers)\n  ").concat(logicalSizeCSS('1px', '1px'), "\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n");
 };
 /*
  * Styles

package/es/components/accessibility/skip_link/skip_link.js

@@ -148,71 +148,23 @@ EuiSkipLink.propTypes = {
   fill: PropTypes.bool,
 
   /**
-     * Any of our named colors.
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
 
   /**
      * Use size `s` in confined spaces
      */
-  size: PropTypes.oneOf(["s", "m"]),
+  size: PropTypes.any,
 
   /**
      * `disabled` is also allowed
      */
   isDisabled: PropTypes.bool,
-
-  /**
-     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
-     * *Only use when the readable text does not change between states.*
-     */
-  isSelected: PropTypes.bool,
-
-  /**
-     * Extends the button to 100% width
-     */
-  fullWidth: PropTypes.bool,
-
-  /**
-     * Override the default minimum width
-     */
-  minWidth: PropTypes.any,
-
-  /**
-     * Force disables the button and changes the icon to a loading spinner
-     */
-  isLoading: PropTypes.bool,
-
-  /**
-     * Object of props passed to the <span/> wrapping the button's content
-     */
-  contentProps: PropTypes.any,
-  style: PropTypes.any,
-
-  /**
-     * Any `type` accepted by EuiIcon
-     */
-  iconType: PropTypes.oneOfType([PropTypes.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.string.isRequired, PropTypes.elementType.isRequired]),
-
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: PropTypes.oneOf(["left", "right"]),
-
-  /**
-     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-     * It doesn't apply to the icon.
-     */
-  textProps: PropTypes.shape({
-    className: PropTypes.string,
-    "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string,
-    ref: PropTypes.any,
-    "data-text": PropTypes.string
-  }),
-  iconSize: PropTypes.oneOf(["s", "m"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   buttonRef: PropTypes.any
 };

package/es/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "buttonProps", "buttonElement", "arrowProps", "theme"];
+var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
 
 function _extends() { _extends = Object.assign || 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); }
 
@@ -48,6 +48,7 @@ import { EuiI18n } from '../i18n';
 import { htmlIdGenerator, withEuiTheme } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { euiAccordionButtonStyles, euiAccordionChildrenStyles, euiAccordionChildWrapperStyles, euiAccordionIconButtonStyles, euiAccordionOptionalActionStyles, euiAccordionSpinnerStyles, euiAccordionTriggerWrapperStyles } from './accordion.styles';
+import { logicalCSS } from '../../global_styling';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var paddingSizeToClassNameMap = {
   none: '',
@@ -86,7 +87,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var forceState = _this.props.forceState;
       requestAnimationFrame(function () {
         var height = _this.childContent && (forceState ? forceState === 'open' : _this.state.isOpen) ? _this.childContent.clientHeight : 0;
-        _this.childWrapper && _this.childWrapper.setAttribute('style', "height: ".concat(height, "px"));
+        _this.childWrapper && _this.childWrapper.setAttribute('style', logicalCSS('height', "".concat(height, "px")));
       });
     });
 
@@ -159,6 +160,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           forceState = _this$props.forceState,
           isLoading = _this$props.isLoading,
           isLoadingMessage = _this$props.isLoadingMessage,
+          isDisabled = _this$props.isDisabled,
           buttonProps = _this$props.buttonProps,
           _this$props$buttonEle = _this$props.buttonElement,
           _ButtonElement = _this$props$buttonEle === void 0 ? 'button' : _this$props$buttonEle,
@@ -188,7 +190,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className); // Emotion styles
 
       var buttonStyles = euiAccordionButtonStyles(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled];
       var childrenStyles = euiAccordionChildrenStyles(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize === 'none' ? undefined : childrenStyles[paddingSize]];
       var childWrapperStyles = euiAccordionChildWrapperStyles(theme);
@@ -215,7 +217,8 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           "aria-controls": id,
           "aria-expanded": isOpen,
           "aria-labelledby": buttonId,
-          tabIndex: buttonElementIsFocusable ? -1 : 0
+          tabIndex: buttonElementIsFocusable ? -1 : 0,
+          isDisabled: isDisabled
         }));
       }
 
@@ -250,8 +253,9 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
-        onClick: this.onToggle,
-        type: ButtonElement === 'button' ? 'button' : undefined
+        onClick: isDisabled ? undefined : this.onToggle,
+        type: ButtonElement === 'button' ? 'button' : undefined,
+        disabled: ButtonElement === 'button' ? isDisabled : undefined
       }), ___EmotionJSX("span", {
         className: buttonContentClasses
       }, buttonContent));
@@ -293,6 +297,7 @@ _defineProperty(EuiAccordionClass, "defaultProps", {
   paddingSize: 'none',
   arrowDisplay: 'left',
   isLoading: false,
+  isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
   buttonElement: 'button'
@@ -302,6 +307,7 @@ EuiAccordionClass.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   id: PropTypes.string.isRequired,
 
   /**
@@ -321,7 +327,8 @@ EuiAccordionClass.propTypes = {
   buttonProps: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }),
 
   /**
@@ -383,6 +390,11 @@ EuiAccordionClass.propTypes = {
   /**
        * Choose whether the loading message replaces the content. Customize the message by passing a node
        */
-  isLoadingMessage: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.node.isRequired])
+  isLoadingMessage: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.node.isRequired]),
+
+  /**
+       * Disable the open/close interaction and visually subdues the trigger
+       */
+  isDisabled: PropTypes.bool
 };
 export var EuiAccordion = withEuiTheme(EuiAccordionClass);

package/es/components/accordion/accordion.styles.js

@@ -8,15 +8,18 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize } from '../../global_styling/mixins';
+import { euiFontSize, logicals, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 export var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;")
+    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", logicalTextAlignCSS('left'), " ", logicalCSS('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
+    // Hover pseudo selector for specificity
+    disabled: /*#__PURE__*/css("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
   };
 };
 
-var _ref5 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1xvjonu-isLoading",
   styles: "align-items:center;display:flex;label:isLoading;"
 } : {
@@ -25,11 +28,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiAccordion__children: /*#__PURE__*/css(";label:euiAccordion__children;"),
-    isLoading: _ref5,
+    isLoading: _ref4,
     xs: /*#__PURE__*/css("padding:", euiTheme.size.xs, ";;label:xs;"),
     s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";;label:s;"),
     m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";;label:m;"),
@@ -37,21 +40,11 @@ export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref
     xl: /*#__PURE__*/css("padding:", euiTheme.size.xl, ";;label:xl;")
   };
 };
-
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "xodlxj-isOpen",
-  styles: "height:auto;opacity:1;visibility:visible;label:isOpen;"
-} : {
-  name: "xodlxj-isOpen",
-  styles: "height:auto;opacity:1;visibility:visible;label:isOpen;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/css("height:0;opacity:0;overflow:hidden;transition:height ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,height;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
-    isOpen: _ref4
+    euiAccordion__childWrapper: /*#__PURE__*/css(logicalCSS('height', 0), " opacity:0;overflow:hidden;transition:", logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    isOpen: /*#__PURE__*/css(logicalCSS('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };
 
@@ -64,12 +57,12 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+export var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
   return {
-    euiAccordion__iconButton: /*#__PURE__*/css("flex-shrink:0;margin-inline-end:", euiTheme.size.xs, ";transform:rotate(0deg)!important;transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
+    euiAccordion__iconButton: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-right', euiTheme.size.xs), " transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
     isOpen: _ref3,
-    arrowRight: /*#__PURE__*/css("margin-left:", euiTheme.size.xs, ";margin-right:0;;label:arrowRight;")
+    arrowRight: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), " ", logicalCSS('margin-right', 0), ";;label:arrowRight;")
   };
 };
 
@@ -87,10 +80,10 @@ export var euiAccordionOptionalActionStyles = function euiAccordionOptionalActio
     euiAccordion__optionalAction: _ref2
   };
 };
-export var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref9) {
-  var euiTheme = _ref9.euiTheme;
+export var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
-    euiAccordion__spinner: /*#__PURE__*/css("margin-right:", euiTheme.size.xs, ";;label:euiAccordion__spinner;")
+    euiAccordion__spinner: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:euiAccordion__spinner;")
   };
 };
 

package/es/components/aspect_ratio/aspect_ratio.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "height", "width", "maxWidth"];
+var _excluded = ["children", "className", "height", "width", "maxWidth", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -20,44 +20,36 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAspectRatio = function EuiAspectRatio(_ref) {
   var children = _ref.children,
       className = _ref.className,
       height = _ref.height,
       width = _ref.width,
       maxWidth = _ref.maxWidth,
+      style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiAspectRatio', className);
-  var euiAspectRatioStyle = {
+
+  var euiAspectRatioStyle = _objectSpread({
     aspectRatio: "".concat(width, " / ").concat(height),
-    height: '100%',
-    width: '100%'
-  };
+    height: 'auto',
+    width: '100%',
+    maxWidth: maxWidth
+  }, style);
 
   var props = _objectSpread({
     className: classes,
     style: euiAspectRatioStyle
   }, rest);
 
-  var content = /*#__PURE__*/React.cloneElement(children, props);
-  var contentwithoptionalwrap = content;
-
-  if (maxWidth) {
-    contentwithoptionalwrap = ___EmotionJSX("div", {
-      style: {
-        maxWidth: maxWidth
-      }
-    }, content);
-  }
-
-  return contentwithoptionalwrap;
+  return /*#__PURE__*/React.cloneElement(children, props);
 };
 EuiAspectRatio.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Aspect ratio height. For example 9 would be widescreen video.

package/es/components/avatar/avatar.js

@@ -116,6 +116,7 @@ EuiAvatar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
          * Custom initials (max 2 characters).

package/es/components/badge/badge.js

@@ -265,6 +265,7 @@ EuiBadge.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Will apply an onclick to icon within the badge

package/es/components/badge/badge_group/badge_group.js

@@ -45,6 +45,7 @@ EuiBadgeGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Space between badges

package/es/components/badge/beta_badge/beta_badge.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
+var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -42,6 +42,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       tooltipContent = _ref.tooltipContent,
       _ref$tooltipPosition = _ref.tooltipPosition,
       tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
+      anchorProps = _ref.anchorProps,
       title = _ref.title,
       iconType = _ref.iconType,
       onClick = _ref.onClick,
@@ -107,7 +108,8 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return ___EmotionJSX(EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, content);
     } else {
       return ___EmotionJSX(Fragment, null, content);
@@ -117,7 +119,8 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return ___EmotionJSX(EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, ___EmotionJSX("span", _extends({
         tabIndex: 0,
         className: classes,
@@ -141,6 +144,7 @@ EuiBetaBadge.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Will apply an onclick to the badge itself
@@ -179,6 +183,16 @@ EuiBetaBadge.propTypes = {
      */
   tooltipPosition: PropTypes.oneOf(["top", "right", "bottom", "left"]),
 
+  /**
+     * Passes onto the span wrapping the badge
+     */
+  anchorProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
   /**
      * Optional title will be supplied as tooltip title or title attribute
      * otherwise the label will be used

package/es/components/badge/notification_badge/badge_notification.js

@@ -51,5 +51,6 @@ EuiNotificationBadge.propTypes = {
   color: PropTypes.oneOf(["accent", "subdued"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/basic_table/basic_table.js

@@ -1147,6 +1147,7 @@ EuiBasicTable.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Describes how to extract a unique ID from each item, used for selections & expanded rows
@@ -1256,7 +1257,8 @@ EuiBasicTable.propTypes = {
     readOnly: PropTypes.bool,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired, PropTypes.shape({
     /**
        * A function that computes the value for each item and renders it
@@ -1296,7 +1298,8 @@ EuiBasicTable.propTypes = {
     readOnly: PropTypes.bool,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired, PropTypes.shape({
     /**
        * An array of one of the objects: #DefaultItemAction or #CustomItemAction
@@ -1310,7 +1313,7 @@ EuiBasicTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, PropTypes.func.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, PropTypes.func.isRequired])]),
+      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]).isRequired, PropTypes.func.isRequired]),
 
       /**
          * The display name of the action (will be the button caption)

package/es/components/basic_table/collapsed_item_actions.js

@@ -238,7 +238,7 @@ CollapsedItemActions.propTypes = {
     /**
        * Defines the color of the button
        */
-    color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, PropTypes.func.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, PropTypes.func.isRequired])]),
+    color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]).isRequired, PropTypes.func.isRequired]),
 
     /**
        * The display name of the action (will be the button caption)

package/es/components/basic_table/in_memory_table.js

@@ -578,6 +578,7 @@ EuiInMemoryTable.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Describes how to extract a unique ID from each item, used for selections & expanded rows
@@ -687,7 +688,8 @@ EuiInMemoryTable.propTypes = {
     readOnly: PropTypes.bool,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired, PropTypes.shape({
     /**
        * A function that computes the value for each item and renders it
@@ -727,7 +729,8 @@ EuiInMemoryTable.propTypes = {
     readOnly: PropTypes.bool,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired, PropTypes.shape({
     /**
        * An array of one of the objects: #DefaultItemAction or #CustomItemAction
@@ -741,7 +744,7 @@ EuiInMemoryTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, PropTypes.func.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, PropTypes.func.isRequired])]),
+      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]).isRequired, PropTypes.func.isRequired]),
 
       /**
          * The display name of the action (will be the button caption)
@@ -1005,6 +1008,7 @@ EuiInMemoryTable.propTypes = {
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
+      css: PropTypes.any,
       // Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other
       // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
       // Admittedly, this is a bit of a hack.
@@ -1113,7 +1117,8 @@ EuiInMemoryTable.propTypes = {
     dateFormat: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired]),
   pagination: PropTypes.oneOfType([PropTypes.oneOf([undefined]), PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     pageSizeOptions: PropTypes.arrayOf(PropTypes.number.isRequired),

package/es/components/beacon/beacon.js

@@ -50,6 +50,7 @@ EuiBeacon.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Height and width of the center circle. Value is passed directly to the `style` attribute

package/es/components/beacon/beacon.styles.js

@@ -11,13 +11,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  */
 import { keyframes, css } from '@emotion/react';
 import { euiPaletteColorBlind } from '../../services';
-import { euiCanAnimate } from '../../global_styling';
+import { euiCanAnimate, logicalCSS, logicalSizeCSS } from '../../global_styling';
 var visColors = euiPaletteColorBlind();
 var euiBeaconPulseLarge = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(3);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
 var euiBeaconPulseSmall = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(2);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
 export var euiBeaconStyles = function euiBeaconStyles() {
   return {
     // Base
-    euiBeacon: /*#__PURE__*/css("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';height:100%;width:100%;inset-inline-start:0;inset-block-start:0;background-color:transparent;border-radius:50%;box-shadow:0 0 1px 1px ", visColors[0], ";}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
+    euiBeacon: /*#__PURE__*/css("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';", logicalSizeCSS('100%', '100%'), " ", logicalCSS('left', 0), " ", logicalCSS('top', 0), " background-color:transparent;border-radius:50%;box-shadow:0 0 1px 1px ", visColors[0], ";}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
   };
 };

package/es/components/bottom_bar/bottom_bar.js

@@ -153,6 +153,7 @@ _EuiBottomBar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * How to position the bottom bar against its parent.
@@ -234,6 +235,7 @@ EuiBottomBar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * How to position the bottom bar against its parent.

package/es/components/breadcrumbs/breadcrumb.js

@@ -120,6 +120,7 @@ EuiBreadcrumbContent.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   href: PropTypes.string,
   rel: PropTypes.string,
   onClick: PropTypes.func,