@elastic/eui 63.0.6 → 64.0.2

package/lib/components/table/table_row_cell_checkbox.js

@@ -40,5 +40,6 @@ exports.EuiTableRowCellCheckbox = EuiTableRowCellCheckbox;
 EuiTableRowCellCheckbox.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/tabs/tab.js

@@ -111,6 +111,7 @@ EuiTab.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   href: _propTypes.default.string,
   onClick: _propTypes.default.func
 };

package/lib/components/tabs/tabbed_content/tabbed_content.js

@@ -235,6 +235,7 @@ EuiTabbedContent.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * When tabbing into the tabs, set the focus on `initial` for the first tab,
@@ -272,7 +273,8 @@ EuiTabbedContent.propTypes = {
     append: _propTypes.default.node,
     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
   }),
   onTabClick: _propTypes.default.func,
 
@@ -289,7 +291,8 @@ EuiTabbedContent.propTypes = {
     append: _propTypes.default.node,
     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
   }),
   size: _propTypes.default.oneOf(["s", "m", "l", "xl"]),
 
@@ -307,6 +310,7 @@ EuiTabbedContent.propTypes = {
     append: _propTypes.default.node,
     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
   }).isRequired).isRequired
 };

package/lib/components/text/text.js

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

package/lib/components/text/text.styles.js

@@ -74,7 +74,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiTheme), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/(0, _react.css)(euiScaleText(euiThemeContext, {

package/lib/components/text/text_align.js

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

package/lib/components/text/text_color.js

@@ -84,6 +84,7 @@ EuiTextColor.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Any of our named colors or a `hex`, `rgb` or `rgba` value.

package/lib/components/timeline/timeline.js

@@ -70,7 +70,8 @@ EuiTimeline.propTypes = {
     verticalAlign: _propTypes.default.any,
     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
   }).isRequired),
 
   /**
@@ -79,5 +80,6 @@ EuiTimeline.propTypes = {
   gutterSize: _propTypes.default.any,
   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/timeline/timeline_item.js

@@ -59,5 +59,6 @@ EuiTimelineItem.propTypes = {
   verticalAlign: _propTypes.default.any,
   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/title/title.js

@@ -60,6 +60,7 @@ EuiTitle.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * ReactElement to render as this component's content

package/lib/components/toast/global_toast_list.js

@@ -307,7 +307,8 @@ EuiGlobalToastList.propTypes = {
     onClose: _propTypes.default.func,
     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
   }).isRequired),
   dismissToast: _propTypes.default.func.isRequired,
   toastLifeTimeMs: _propTypes.default.number.isRequired,
@@ -318,5 +319,6 @@ EuiGlobalToastList.propTypes = {
   side: _propTypes.default.oneOf(["right", "left"]),
   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/toast/global_toast_list.styles.js

@@ -22,7 +22,7 @@ var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";overflow-y:auto;", (0, _global_styling.logicalCSS)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";}};label:right;"),
     left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";}};label:left;")

package/lib/components/toast/global_toast_list_item.js

@@ -47,6 +47,7 @@ EuiGlobalToastListItem.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   isDismissed: _propTypes.default.bool,
 
   /**

package/lib/components/toast/toast.js

@@ -125,5 +125,6 @@ EuiToast.propTypes = {
   onClose: _propTypes.default.func,
   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/tool_tip/tool_tip_popover.js

@@ -136,6 +136,7 @@ EuiToolTipPopover.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   positionToolTip: _propTypes.default.func.isRequired,
   children: _propTypes.default.node,
   title: _propTypes.default.node,

package/lib/components/tour/tour.js

@@ -40,77 +40,7 @@ var EuiTour = function EuiTour(_ref) {
 exports.EuiTour = EuiTour;
 EuiTour.propTypes = {
   children: _propTypes.default.func.isRequired,
-  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
-    className: _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-
-    /**
-         * Element to which the tour step popover attaches when open
-         */
-    children: _propTypes.default.element,
-    anchor: _propTypes.default.any,
-
-    /**
-         * Contents of the tour step popover
-         */
-    content: _propTypes.default.node.isRequired,
-
-    /**
-         * Step will display if set to `true`
-         */
-    isStepOpen: _propTypes.default.bool,
-
-    /**
-         * Change the default min width of the popover panel
-         */
-    minWidth: _propTypes.default.any,
-
-    /**
-         * Change the default max width of the popover panel
-         */
-    maxWidth: _propTypes.default.any,
-
-    /**
-         * Function to call for 'Skip tour' and 'End tour' actions
-         */
-    onFinish: _propTypes.default.func.isRequired,
-
-    /**
-         * The number of the step within the parent tour. 1-based indexing.
-         */
-    step: _propTypes.default.number.isRequired,
-
-    /**
-         * The total number of steps in the tour
-         */
-    stepsTotal: _propTypes.default.number.isRequired,
-
-    /**
-         * Optional, standard DOM `style` attribute. Passed to the EuiPopover panel.
-         */
-    style: _propTypes.default.any,
-
-    /**
-         * Smaller title text that appears atop each step in the tour. The subtitle gets wrapped in the appropriate heading level.
-         */
-    subtitle: _propTypes.default.node,
-
-    /**
-         * Larger title text specific to this step. The title gets wrapped in the appropriate heading level.
-         */
-    title: _propTypes.default.node.isRequired,
-
-    /**
-         * Extra visual indication of step location
-         */
-    decoration: _propTypes.default.oneOf(["none", "beacon"]),
-
-    /**
-         * Element to replace the 'Skip tour' link in the footer
-         */
-    footerAction: _propTypes.default.element
-  }).isRequired).isRequired,
+  steps: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
   initialState: _propTypes.default.shape({
     currentTourStep: _propTypes.default.number.isRequired,
     isTourActive: _propTypes.default.bool.isRequired,

package/lib/components/tour/tour.styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTourStyles = exports.euiTourHeaderStyles = exports.euiTourFooterStyles = exports.euiTourBeaconStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../services");
+
+var _global_styling = require("../../global_styling");
+
+var _popover_panel = require("../popover/popover_panel/_popover_panel.styles");
+
+var _popover_arrow = require("../popover/popover_arrow/_popover_arrow.styles");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var backgroundColor = function backgroundColor(color, colorMode) {
+  return colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(color, 0.45) : (0, _services.tint)(color, 0.5);
+};
+
+var euiTourStyles = function euiTourStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+      colorMode = _ref.colorMode;
+  return {
+    // Targets EuiPopoverPanel
+    euiTour: /*#__PURE__*/(0, _react.css)("&[data-popover-open='true']{[class*='euiTourBeacon']{opacity:1;}}[data-popover-arrow='top']{&:before{", (0, _global_styling.logicalCSS)('border-top-color', backgroundColor(euiTheme.colors.lightestShade, colorMode)), ";}};label:euiTour;")
+  };
+};
+
+exports.euiTourStyles = euiTourStyles;
+
+var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var arrowSize = euiTheme.size[_popover_arrow.popoverArrowSize];
+  var arrowSizeInt = parseInt(arrowSize, 10);
+  return {
+    // Base
+    euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";;label:euiTourBeacon;"),
+    // Positions
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt / 2, "px")), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt * -2, "px")), ";;label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt / 2, "px")), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt / 2, "px")), ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt * -2, "px")), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt / 2, "px")), ";;label:bottom;")
+  };
+};
+
+exports.euiTourBeaconStyles = euiTourBeaconStyles;
+
+var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
+    // Elements
+    euiTourHeader__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', 0), ";;label:euiTourHeader__title;"),
+    euiTourHeader__subtitle: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:euiTourHeader__subtitle;")
+  };
+};
+
+exports.euiTourHeaderStyles = euiTourHeaderStyles;
+
+var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
+  return {
+    // Base
+    euiTourFooter: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), ";", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
+  };
+};
+
+exports.euiTourFooterStyles = euiTourFooterStyles;

package/lib/components/tour/tour_step.js

@@ -29,6 +29,8 @@ var _tour_step_indicator = require("./tour_step_indicator");
 
 var _services = require("../../services");
 
+var _tour = require("./tour.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["anchorPosition", "anchor", "children", "className", "closePopover", "content", "isStepOpen", "minWidth", "maxWidth", "onFinish", "step", "stepsTotal", "style", "subtitle", "title", "decoration", "footerAction"];
@@ -111,6 +113,16 @@ var EuiTourStep = function EuiTourStep(_ref) {
 
   var animationFrameId = (0, _react.useRef)();
   var anchorNode = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popoverPosition = _useState4[0],
+      setPopoverPosition = _useState4[1];
+
+  var onPositionChange = function onPositionChange(position) {
+    setPopoverPosition(position);
+  };
+
   (0, _react.useEffect)(function () {
     if (anchor) {
       animationFrameId.current = window.requestAnimationFrame(function () {
@@ -124,6 +136,12 @@ var EuiTourStep = function EuiTourStep(_ref) {
     };
   }, [anchor]);
   var classes = (0, _classnames.default)('euiTour', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var tourStyles = (0, _tour.euiTourStyles)(euiTheme);
+  var headerStyles = (0, _tour.euiTourHeaderStyles)(euiTheme);
+  var footerStyles = (0, _tour.euiTourFooterStyles)(euiTheme);
+  var beaconStyles = (0, _tour.euiTourBeaconStyles)(euiTheme);
+  var beaconCss = [beaconStyles.euiTourBeacon, popoverPosition && beaconStyles[popoverPosition]];
   var finishButtonProps = {
     color: 'text',
     flush: 'right',
@@ -182,11 +200,16 @@ var EuiTourStep = function EuiTourStep(_ref) {
     ownFocus: false,
     panelClassName: classes,
     panelStyle: style,
+    panelProps: {
+      css: tourStyles.euiTour
+    },
     offset: hasBeacon ? 10 : 0,
     'aria-labelledby': titleId,
     arrowChildren: hasBeacon && (0, _react2.jsx)(_beacon.EuiBeacon, {
+      css: beaconCss,
       className: "euiTour__beacon"
-    })
+    }),
+    onPositionChange: onPositionChange
   }, rest);
 
   var layout = (0, _react2.jsx)("div", {
@@ -195,17 +218,19 @@ var EuiTourStep = function EuiTourStep(_ref) {
       maxWidth: maxWidth
     }
   }, (0, _react2.jsx)(_popover.EuiPopoverTitle, {
+    css: headerStyles.euiTourHeader,
     className: "euiTourHeader",
     id: titleId
   }, subtitle && (0, _react2.jsx)(_title.EuiTitle, {
-    size: "xxxs",
-    className: "euiTourHeader__subtitle"
+    css: headerStyles.euiTourHeader__subtitle,
+    size: "xxxs"
   }, (0, _react2.jsx)("h2", null, subtitle)), (0, _react2.jsx)(_title.EuiTitle, {
-    size: "xxs",
-    className: "euiTourHeader__title"
+    css: headerStyles.euiTourHeader__title,
+    size: "xxs"
   }, subtitle ? (0, _react2.jsx)("h3", null, title) : (0, _react2.jsx)("h2", null, title))), (0, _react2.jsx)("div", {
     className: "euiTour__content"
   }, content), (0, _react2.jsx)(_popover.EuiPopoverFooter, {
+    css: footerStyles.euiTourFooter,
     className: "euiTourFooter"
   }, footer));
 
@@ -225,6 +250,7 @@ EuiTourStep.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Element to which the tour step popover attaches when open

package/lib/components/tour/tour_step_indicator.js

@@ -3,22 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STATUS = exports.EuiTourStepIndicator = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports.EuiTourStepIndicator = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
+var _react2 = require("@emotion/react");
 
 var _icon = require("../icon");
 
 var _i18n = require("../i18n");
 
-var _react2 = require("@emotion/react");
-
 var _excluded = ["className", "number", "status"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,21 +27,24 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var statusToClassNameMap = {
-  complete: 'euiTourStepIndicator--complete',
-  incomplete: 'euiTourStepIndicator--incomplete',
-  active: 'euiTourStepIndicator--active'
+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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;"
+} : {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var STATUS = (0, _common.keysOf)(statusToClassNameMap);
-exports.STATUS = STATUS;
 
-var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
-  var className = _ref.className,
-      number = _ref.number,
-      status = _ref.status,
-      rest = _objectWithoutProperties(_ref, _excluded);
+var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
+  var className = _ref2.className,
+      number = _ref2.number,
+      status = _ref2.status,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
-  var classes = (0, _classnames.default)('euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, className);
+  var classes = (0, _classnames.default)('euiTourStepIndicator', className);
   var indicatorIcon;
 
   if (status === 'active') {
@@ -94,6 +95,7 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
     }
   }, function (ariaLabel) {
     return (0, _react2.jsx)("li", _extends({
+      css: _ref,
       className: classes,
       "aria-label": ariaLabel
     }, rest), indicatorIcon);
@@ -106,5 +108,6 @@ EuiTourStepIndicator.propTypes = {
   status: _propTypes.default.oneOf(["complete", "incomplete", "active"]).isRequired,
   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/tree_view/tree_view.js

@@ -379,6 +379,7 @@ _defineProperty(EuiTreeView, "contextType", EuiTreeViewContext);
 EuiTreeView.propTypes = {
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /** An array of EuiTreeViewNodes
        */

package/lib/global_styling/functions/logicals.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
 
 var _common = require("../../components/common");
 
@@ -64,8 +64,8 @@ var logicalSize = {
   'min-width': 'min-inline-size'
 };
 var logicalOverflow = {
-  'overflow-x': 'overflow-block',
-  'overflow-y': 'overflow-inline'
+  'overflow-x': 'overflow-inline',
+  'overflow-y': 'overflow-block'
 };
 var logicalBorders = {
   'border-horizontal': 'border-inline',
@@ -113,6 +113,23 @@ exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
 var logicalCSS = function logicalCSS(property, value) {
   return "".concat(logicals[property], ": ").concat(value, ";");
 };
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+
+
+exports.logicalCSS = logicalCSS;
+
+var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
+  return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
+};
 /**
  *
  * @param property A string that is a valid CSS logical property
@@ -121,7 +138,7 @@ var logicalCSS = function logicalCSS(property, value) {
  */
 
 
-exports.logicalCSS = logicalCSS;
+exports.logicalCSSWithFallback = logicalCSSWithFallback;
 
 var logicalStyle = function logicalStyle(property, value) {
   // Strip hyphens and camelCase the CSS logical property so React doesn't throw errors