@elastic/eui 64.0.0 → 65.0.1

package/src/global_styling/utility/_utility.scss

@@ -1,84 +1,6 @@
 // This file utilizes !importants on purpose
 // sass-lint:disable no-important
 
-// Vertical alignment
-.eui-alignBaseline { vertical-align: baseline !important; }
-.eui-alignBottom { vertical-align: bottom !important; }
-.eui-alignMiddle { vertical-align: middle !important; }
-.eui-alignTop { vertical-align: top !important; }
-
-// Display
-.eui-displayBlock {display: block !important;}
-.eui-displayInline {display: inline !important;}
-.eui-displayInlineBlock {display: inline-block !important;}
-
-.eui-fullWidth {
-  display: block !important;
-  width: 100% !important;
-}
-
-// Text
-.eui-textCenter {text-align: center !important;}
-.eui-textLeft {text-align: left !important;}
-.eui-textRight {text-align: right !important;}
-.eui-textNoWrap {white-space: nowrap !important;}
-.eui-textInheritColor {color: inherit !important;}
-
-.eui-textBreakWord {
-  @include euiTextBreakWord;
-}
-
-.eui-textBreakAll {
-  overflow-wrap: break-word !important; // Fixes FF when dashes are involved #2288
-  word-break: break-all !important;
-}
-
-.eui-textBreakNormal {
-  overflow-wrap: normal !important;
-  word-wrap: normal !important;
-  word-break: normal !important;
-}
-
-.eui-textTruncate {
-  @include euiTextTruncate;
-}
-
-.eui-textNumber {
-  @include euiNumberFormat;
-}
-
-/**
- *  Responsive
- *
- *  1. Be sure to hide the element initially
- */
-
-[class*='eui-showFor'] {
-  display: none !important; /* 1 */
-}
-
-@each $size in $euiBreakpointKeys {
-  .eui-hideFor--#{$size} {
-    @include euiBreakpoint($size) { display: none !important; }
-  }
-
-  .eui-showFor--#{$size} {
-    @include  euiBreakpoint($size) { display: inline !important; }
-  }
-
-  .eui-showFor--#{$size}--block {
-    @include  euiBreakpoint($size) { display: block !important; }
-  }
-
-  .eui-showFor--#{$size}--inlineBlock {
-    @include  euiBreakpoint($size) { display: inline-block !important; }
-  }
-
-  .eui-showFor--#{$size}--flex {
-    @include  euiBreakpoint($size) { display: flex !important; }
-  }
-}
-
 /**
   * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
   * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
@@ -91,52 +13,3 @@
     flex-basis: 0%;
   }
 }
-
-/**
- * Scroll bar only
- */
-.eui-scrollBar {
-  @include euiScrollBar;
-}
-
-/**
-  * Overflow scrolling
-  */
-.eui-yScroll {
-  @include euiYScroll;
-}
-
-.eui-xScroll {
-  @include euiXScroll;
-}
-
-/**
-  * Overflow scrolling with shadows
-  */
-.eui-yScrollWithShadows {
-  @include euiYScrollWithShadows;
-}
-
-.eui-xScrollWithShadows {
-  @include euiXScrollWithShadows;
-}
-
-/**
-  * Forcing focus ring on non-EUI elements
-  */
-.eui-isFocusable:focus {
-  @include euiFocusRing('large');
-}
-
-/**
- * For quickly applying a full-height element whether using flex or not
- */
-@mixin euiFullHeight {
-  height: 100%;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
-.eui-fullHeight {
-  @include euiFullHeight;
-}

package/src/themes/amsterdam/global_styling/mixins/_index.scss

@@ -8,9 +8,7 @@
 @import 'states';
 @import '../../../../global_styling/mixins/icons';
 
-@import '../../../../global_styling/mixins/beta_badge';
 @import '../../../../global_styling/mixins/button';
-@import 'button';
 @import '../../../../global_styling/mixins/form';
 @import 'form';
 @import '../../../../global_styling/mixins/header';

package/src/themes/amsterdam/overrides/_header.scss

@@ -1,5 +1,3 @@
-@import '../global_styling/mixins/button';
-
 .euiHeader {
   height: $euiHeaderHeight;
   padding-left: $euiSizeS;

package/src/themes/amsterdam/overrides/_index.scss

@@ -1,7 +1,3 @@
-@import 'button';
-@import 'button_empty';
-@import 'button_group';
-@import 'card';
 @import 'code';
 @import 'color_stops';
 @import 'combo_box';

package/test-env/components/accessibility/screen_reader_only/screen_reader_only.styles.js

@@ -7,6 +7,8 @@ exports.euiScreenReaderOnlyStyles = exports.euiScreenReaderOnly = 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
@@ -20,7 +22,7 @@ var _react = require("@emotion/react");
  * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
  */
 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((0, _global_styling.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((0, _global_styling.logicalCSS)('left', '-10000px'), "\n  // The element must have a size (for some screen readers)\n  ").concat((0, _global_styling.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/test-env/components/accessibility/skip_link/skip_link.js

@@ -160,70 +160,20 @@ EuiSkipLink.propTypes = {
   fill: _propTypes.default.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.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
 
   /**
      * Use size `s` in confined spaces
      */
-  size: _propTypes.default.oneOf(["s", "m"]),
+  size: _propTypes.default.any,
 
   /**
      * `disabled` is also allowed
      */
   isDisabled: _propTypes.default.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.default.bool,
-
-  /**
-     * Extends the button to 100% width
-     */
-  fullWidth: _propTypes.default.bool,
-
-  /**
-     * Override the default minimum width
-     */
-  minWidth: _propTypes.default.any,
-
-  /**
-     * Force disables the button and changes the icon to a loading spinner
-     */
-  isLoading: _propTypes.default.bool,
-
-  /**
-     * Object of props passed to the <span/> wrapping the button's content
-     */
-  contentProps: _propTypes.default.any,
-  style: _propTypes.default.any,
-
-  /**
-     * Any `type` accepted by EuiIcon
-     */
-  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]),
-
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: _propTypes.default.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.default.shape({
-    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,

package/test-env/components/accordion/accordion.js

@@ -49,6 +49,8 @@ var _button = require("../button");
 
 var _accordion = require("./accordion.styles");
 
+var _global_styling = require("../../global_styling");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
@@ -96,7 +98,7 @@ 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', (0, _global_styling.logicalCSS)('height', "".concat(height, "px")));
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToggle", function () {

package/test-env/components/accordion/accordion.styles.js

@@ -7,14 +7,14 @@ exports.euiAccordionTriggerWrapperStyles = exports.euiAccordionSpinnerStyles = e
 
 var _react = require("@emotion/react");
 
-var _mixins = require("../../global_styling/mixins");
+var _global_styling = require("../../global_styling");
 
 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 euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.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__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", (0, _global_styling.logicalTextAlignCSS)('left'), " ", (0, _global_styling.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__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
@@ -23,7 +23,7 @@ var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext
 
 exports.euiAccordionButtonStyles = euiAccordionButtonStyles;
 
-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;"
 } : {
@@ -32,11 +32,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiAccordion__children: /*#__PURE__*/(0, _react.css)(";label:euiAccordion__children;"),
-    isLoading: _ref5,
+    isLoading: _ref4,
     xs: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";;label:m;"),
@@ -47,20 +47,11 @@ var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
 
 exports.euiAccordionChildrenStyles = euiAccordionChildrenStyles;
 
-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__
-};
-
-var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", _global_styling.logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    isOpen: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };
 
@@ -75,12 +66,12 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
   return {
-    euiAccordion__iconButton: /*#__PURE__*/(0, _react.css)("flex-shrink:0;margin-inline-end:", euiTheme.size.xs, ";transform:rotate(0deg)!important;transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
+    euiAccordion__iconButton: /*#__PURE__*/(0, _react.css)("flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), " transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
     isOpen: _ref3,
-    arrowRight: /*#__PURE__*/(0, _react.css)("margin-left:", euiTheme.size.xs, ";margin-right:0;;label:arrowRight;")
+    arrowRight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-right', 0), ";;label:arrowRight;")
   };
 };
 
@@ -103,10 +94,10 @@ var euiAccordionOptionalActionStyles = function euiAccordionOptionalActionStyles
 
 exports.euiAccordionOptionalActionStyles = euiAccordionOptionalActionStyles;
 
-var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref9) {
-  var euiTheme = _ref9.euiTheme;
+var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
-    euiAccordion__spinner: /*#__PURE__*/(0, _react.css)("margin-right:", euiTheme.size.xs, ";;label:euiAccordion__spinner;")
+    euiAccordion__spinner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:euiAccordion__spinner;")
   };
 };
 

package/test-env/components/badge/beta_badge/beta_badge.js

@@ -31,7 +31,7 @@ var _icon = require("../../icon");
 
 var _react2 = require("@emotion/react");
 
-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 _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); }
 
@@ -60,6 +60,7 @@ 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,
@@ -124,7 +125,8 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, content);
     } else {
       return (0, _react2.jsx)(_react.Fragment, null, content);
@@ -134,7 +136,8 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, (0, _react2.jsx)("span", (0, _extends2.default)({
         tabIndex: 0,
         className: classes,
@@ -199,6 +202,16 @@ EuiBetaBadge.propTypes = {
      */
   tooltipPosition: _propTypes.default.oneOf(["top", "right", "bottom", "left"]),
 
+  /**
+     * Passes onto the span wrapping the badge
+     */
+  anchorProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+
   /**
      * Optional title will be supplied as tooltip title or title attribute
      * otherwise the label will be used

package/test-env/components/basic_table/basic_table.js

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

package/test-env/components/basic_table/collapsed_item_actions.js

@@ -98,8 +98,7 @@ var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClickItem", function (onClickAction) {
@@ -239,7 +238,7 @@ CollapsedItemActions.propTypes = {
     /**
        * Defines the color of the button
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, _propTypes.default.func.isRequired]), _propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, _propTypes.default.func.isRequired])]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
 
     /**
        * The display name of the action (will be the button caption)

package/test-env/components/basic_table/in_memory_table.js

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

package/test-env/components/beacon/beacon.styles.js

@@ -24,7 +24,7 @@ var euiBeaconPulseSmall = (0, _react.keyframes)(_templateObject2 || (_templateOb
 var euiBeaconStyles = function euiBeaconStyles() {
   return {
     // Base
-    euiBeacon: /*#__PURE__*/(0, _react.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;}", _global_styling.euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
+    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.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;}", _global_styling.euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
   };
 };
 

package/test-env/components/breadcrumbs/breadcrumb.styles.js

@@ -55,8 +55,8 @@ var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeCon
     isTruncated: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
     // Types
-    page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),
+    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
     applicationStyles: {
       onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ",;;label:onlyChild;"),
       firstChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, " 0 0 ", euiTheme.border.radius.medium, ";clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), ",;;label:firstChild;"),