@elastic/eui 62.2.1 → 64.0.0

package/optimize/es/components/page_template/page_template.js

@@ -0,0 +1,204 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "mainProps", "className", "minHeight", "responsive"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { _EuiPageOuter as EuiPageOuter } from './outer';
+import { _EuiPageInner as EuiPageInner } from './inner';
+import { _EuiPageBottomBar as EuiPageBottomBar } from './bottom_bar/page_bottom_bar';
+import { _EuiPageEmptyPrompt as EuiPageEmptyPrompt } from './empty_prompt/page_empty_prompt';
+import { EuiPageHeader, EuiPageSection, EuiPageSidebar } from '../page';
+import { useEuiTheme, useGeneratedHtmlId } from '../../services';
+import { logicalStyle } from '../../global_styling';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var TemplateContext = /*#__PURE__*/createContext({
+  section: {},
+  header: {},
+  emptyPrompt: {},
+  bottomBar: {}
+});
+
+/**
+ * Consumed via `EuiPageTemplate`,
+ * it controls and propogates most of the shared props per direct child
+ */
+export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
+  var children = _ref.children,
+      _ref$restrictWidth = _ref.restrictWidth,
+      restrictWidth = _ref$restrictWidth === void 0 ? true : _ref$restrictWidth,
+      _ref$paddingSize = _ref.paddingSize,
+      paddingSize = _ref$paddingSize === void 0 ? 'l' : _ref$paddingSize,
+      _ref$grow = _ref.grow,
+      grow = _ref$grow === void 0 ? true : _ref$grow,
+      bottomBorder = _ref.bottomBorder,
+      _offset = _ref.offset,
+      panelled = _ref.panelled,
+      contentBorder = _ref.contentBorder,
+      mainProps = _ref.mainProps,
+      className = _ref.className,
+      _ref$minHeight = _ref.minHeight,
+      minHeight = _ref$minHeight === void 0 ? '460px' : _ref$minHeight,
+      _ref$responsive = _ref.responsive,
+      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useEuiTheme = useEuiTheme(),
+      euiTheme = _useEuiTheme.euiTheme;
+
+  var _useState = useState(_offset),
+      _useState2 = _slicedToArray(_useState, 2),
+      offset = _useState2[0],
+      setOffset = _useState2[1];
+
+  var templateContext = useContext(TemplateContext); // Used as a target to insert the bottom bar component
+
+  var pageInnerId = useGeneratedHtmlId({
+    prefix: 'EuiPageTemplateInner',
+    conditionalId: mainProps === null || mainProps === void 0 ? void 0 : mainProps.id
+  });
+  useEffect(function () {
+    if (_offset === undefined) {
+      var _document$body$datase;
+
+      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
+      setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
+    }
+  }, [_offset, euiTheme.base]); // Sections include page header
+
+  var sections = [];
+  var sidebar = [];
+
+  var getBottomBorder = function getBottomBorder() {
+    if (bottomBorder !== undefined) {
+      return bottomBorder;
+    } else {
+      return sidebar.length ? true : 'extended';
+    }
+  };
+
+  var getHeaderProps = function getHeaderProps() {
+    return {
+      restrictWidth: restrictWidth,
+      paddingSize: paddingSize,
+      bottomBorder: getBottomBorder()
+    };
+  };
+
+  var getSectionProps = function getSectionProps() {
+    return {
+      restrictWidth: restrictWidth,
+      paddingSize: paddingSize,
+      color: panelled === false ? 'transparent' : 'plain'
+    };
+  };
+
+  var getSideBarProps = function getSideBarProps() {
+    return {
+      paddingSize: paddingSize,
+      responsive: responsive
+    };
+  };
+
+  var getBottomBarProps = function getBottomBarProps() {
+    return {
+      restrictWidth: restrictWidth,
+      paddingSize: paddingSize,
+      parent: "#".concat(pageInnerId)
+    };
+  };
+
+  var innerPanelled = function innerPanelled() {
+    return panelled === false ? false : Boolean(sidebar.length > 0);
+  };
+
+  var innerBordered = function innerBordered() {
+    return contentBorder !== undefined ? contentBorder : Boolean(sidebar.length > 0);
+  };
+
+  React.Children.toArray(children).forEach(function (child, index) {
+    if (! /*#__PURE__*/React.isValidElement(child)) return; // Skip non-components
+
+    switch (child.type) {
+      case EuiPageSidebar:
+        sidebar.push( /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({
+          key: "sidebar".concat(index)
+        }, getSideBarProps()), child.props)));
+        break;
+
+      default:
+        sections.push(child);
+    }
+  });
+
+  var _minHeight = grow ? "max(".concat(minHeight, ", 100vh)") : minHeight;
+
+  var classes = classNames('euiPageTemplate', className);
+
+  var pageStyle = _objectSpread(_objectSpread(_objectSpread({}, logicalStyle('min-height', _minHeight)), logicalStyle('padding-top', offset)), rest.style);
+
+  templateContext.header = getHeaderProps();
+  templateContext.section = getSectionProps();
+  templateContext.emptyPrompt = {
+    panelled: innerPanelled() ? true : panelled,
+    grow: true
+  };
+  templateContext.bottomBar = getBottomBarProps();
+  return ___EmotionJSX(TemplateContext.Provider, {
+    value: templateContext
+  }, ___EmotionJSX(EuiPageOuter, _extends({}, rest, {
+    responsive: responsive,
+    style: pageStyle,
+    className: classes
+  }), sidebar, ___EmotionJSX(EuiPageInner, _extends({}, mainProps, {
+    id: pageInnerId,
+    border: innerBordered(),
+    panelled: innerPanelled(),
+    responsive: responsive
+  }), sections)));
+};
+
+var _EuiPageSection = function _EuiPageSection(props) {
+  var templateContext = useContext(TemplateContext);
+  return ___EmotionJSX(EuiPageSection, _extends({}, templateContext.section, {
+    grow: true
+  }, props));
+};
+
+var _EuiPageHeader = function _EuiPageHeader(props) {
+  var templateContext = useContext(TemplateContext);
+  return ___EmotionJSX(EuiPageHeader, _extends({}, templateContext.header, props));
+};
+
+var _EuiPageEmptyPrompt = function _EuiPageEmptyPrompt(props) {
+  var templateContext = useContext(TemplateContext);
+  return ___EmotionJSX(EuiPageEmptyPrompt, _extends({}, templateContext.emptyPrompt, props));
+};
+
+var _EuiPageBottomBar = function _EuiPageBottomBar(props) {
+  var _useContext = useContext(TemplateContext),
+      bottomBar = _useContext.bottomBar;
+
+  return ___EmotionJSX(EuiPageBottomBar, _extends({}, bottomBar, props));
+};
+
+export var EuiPageTemplate = Object.assign(_EuiPageTemplate, {
+  Sidebar: EuiPageSidebar,
+  Header: _EuiPageHeader,
+  Section: _EuiPageSection,
+  BottomBar: _EuiPageBottomBar,
+  EmptyPrompt: _EuiPageEmptyPrompt
+});

package/optimize/es/components/popover/popover.js

@@ -10,7 +10,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 
 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; }
 
@@ -254,6 +254,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;
       var arrowStyles = willRenderArrow ? arrow : undefined;
       var arrowPosition = foundPosition;
+      _this.props.onPositionChange && _this.props.onPositionChange(arrowPosition);
 
       _this.setState({
         popoverStyles: popoverStyles,
@@ -408,6 +409,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
           offset = _this$props.offset,
+          onPositionChange = _this$props.onPositionChange,
           onTrapDeactivation = _this$props.onTrapDeactivation,
           buffer = _this$props.buffer,
           ariaLabel = _this$props['aria-label'],

package/optimize/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -8,6 +8,7 @@
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { euiCanAnimate, logicalCSS } from '../../../global_styling';
+export var openAnimationTiming = 'slow';
 var translateDistance = 's';
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
@@ -23,7 +24,7 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
       property: 'filter'
     }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     // Is visible / open
-    isOpen: /*#__PURE__*/css("opacity:1;pointer-events:auto;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation.slow, " + 100ms);};label:isOpen;"),
+    isOpen: /*#__PURE__*/css("opacity:1;pointer-events:auto;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
     // Positions
     top: /*#__PURE__*/css("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
     bottom: /*#__PURE__*/css("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
@@ -31,7 +32,7 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
     right: /*#__PURE__*/css("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
     // Attached version overrides
     attached: {
-      isOpen: /*#__PURE__*/css("filter:none;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ";};label:isOpen;"),
+      isOpen: /*#__PURE__*/css("filter:none;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
       top: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:top;"),
       bottom: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:bottom;"),
       // Satisfies TS

package/optimize/es/components/provider/cache/cache_provider.js

@@ -6,12 +6,18 @@
  * Side Public License, v 1.
  */
 import React from 'react';
+import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultCache = createCache({
+  key: 'css'
+});
+defaultCache.compat = true;
 export var EuiCacheProvider = function EuiCacheProvider(_ref) {
-  var cache = _ref.cache,
+  var _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? defaultCache : _ref$cache,
       children = _ref.children;
-  return children && cache ? ___EmotionJSX(CacheProvider, {
+  return ___EmotionJSX(CacheProvider, {
     value: cache
-  }, children) : ___EmotionJSX(React.Fragment, null, children);
+  }, children);
 };

package/optimize/es/components/tour/tour.styles.js

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { shade, tint, COLOR_MODES_STANDARD } from '../../services';
+import { logicalCSS } from '../../global_styling';
+import { openAnimationTiming } from '../popover/popover_panel/_popover_panel.styles';
+import { popoverArrowSize } from '../popover/popover_arrow/_popover_arrow.styles';
+
+var backgroundColor = function backgroundColor(color, colorMode) {
+  return colorMode === COLOR_MODES_STANDARD.dark ? shade(color, 0.45) : tint(color, 0.5);
+};
+
+export var euiTourStyles = function euiTourStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+      colorMode = _ref.colorMode;
+  return {
+    // Targets EuiPopoverPanel
+    euiTour: /*#__PURE__*/css("&[data-popover-open='true']{[class*='euiTourBeacon']{opacity:1;}}[data-popover-arrow='top']{&:before{", logicalCSS('border-top-color', backgroundColor(euiTheme.colors.lightestShade, colorMode)), ";}};label:euiTour;")
+  };
+};
+export var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var arrowSize = euiTheme.size[popoverArrowSize];
+  var arrowSizeInt = parseInt(arrowSize, 10);
+  return {
+    // Base
+    euiTourBeacon: /*#__PURE__*/css("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[openAnimationTiming], ";;label:euiTourBeacon;"),
+    // Positions
+    right: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt / 2, "px")), ";", logicalCSS('left', "".concat(arrowSizeInt * -2, "px")), ";;label:right;"),
+    left: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt / 2, "px")), ";", logicalCSS('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/css(logicalCSS('top', arrowSize), ";", logicalCSS('left', "".concat(arrowSizeInt / 2, "px")), ";;label:top;"),
+    bottom: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt * -2, "px")), ";", logicalCSS('left', "".concat(arrowSizeInt / 2, "px")), ";;label:bottom;")
+  };
+};
+export var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiTourHeader: /*#__PURE__*/css(logicalCSS('border-bottom', 'none'), ";", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
+    // Elements
+    euiTourHeader__title: /*#__PURE__*/css(logicalCSS('margin-top', 0), ";;label:euiTourHeader__title;"),
+    euiTourHeader__subtitle: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";;label:euiTourHeader__subtitle;")
+  };
+};
+export var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
+  return {
+    // Base
+    euiTourFooter: /*#__PURE__*/css("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium), ";", logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
+  };
+};

package/optimize/es/components/tour/tour_step.js

@@ -25,7 +25,8 @@ import { EuiI18n } from '../i18n';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle, EuiWrappingPopover } from '../popover';
 import { EuiTitle } from '../title';
 import { EuiTourStepIndicator } from './tour_step_indicator';
-import { useGeneratedHtmlId, findElementBySelectorOrRef } from '../../services';
+import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiTheme } from '../../services';
+import { euiTourStyles, euiTourBeaconStyles, euiTourFooterStyles, euiTourHeaderStyles } from './tour.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTourStep = function EuiTourStep(_ref) {
   var _ref$anchorPosition = _ref.anchorPosition,
@@ -67,6 +68,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
 
   var animationFrameId = useRef();
   var anchorNode = useRef(null);
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popoverPosition = _useState4[0],
+      setPopoverPosition = _useState4[1];
+
+  var onPositionChange = function onPositionChange(position) {
+    setPopoverPosition(position);
+  };
+
   useEffect(function () {
     if (anchor) {
       animationFrameId.current = window.requestAnimationFrame(function () {
@@ -80,6 +91,12 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     };
   }, [anchor]);
   var classes = classNames('euiTour', className);
+  var euiTheme = useEuiTheme();
+  var tourStyles = euiTourStyles(euiTheme);
+  var headerStyles = euiTourHeaderStyles(euiTheme);
+  var footerStyles = euiTourFooterStyles(euiTheme);
+  var beaconStyles = euiTourBeaconStyles(euiTheme);
+  var beaconCss = [beaconStyles.euiTourBeacon, popoverPosition && beaconStyles[popoverPosition]];
   var finishButtonProps = {
     color: 'text',
     flush: 'right',
@@ -140,11 +157,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     ownFocus: false,
     panelClassName: classes,
     panelStyle: style,
+    panelProps: {
+      css: tourStyles.euiTour
+    },
     offset: hasBeacon ? 10 : 0,
     'aria-labelledby': titleId,
     arrowChildren: hasBeacon && ___EmotionJSX(EuiBeacon, {
+      css: beaconCss,
       className: "euiTour__beacon"
-    })
+    }),
+    onPositionChange: onPositionChange
   }, rest);
 
   var layout = ___EmotionJSX("div", {
@@ -153,17 +175,19 @@ export var EuiTourStep = function EuiTourStep(_ref) {
       maxWidth: maxWidth
     }
   }, ___EmotionJSX(EuiPopoverTitle, {
+    css: headerStyles.euiTourHeader,
     className: "euiTourHeader",
     id: titleId
   }, subtitle && ___EmotionJSX(EuiTitle, {
-    size: "xxxs",
-    className: "euiTourHeader__subtitle"
+    css: headerStyles.euiTourHeader__subtitle,
+    size: "xxxs"
   }, ___EmotionJSX("h2", null, subtitle)), ___EmotionJSX(EuiTitle, {
-    size: "xxs",
-    className: "euiTourHeader__title"
+    css: headerStyles.euiTourHeader__title,
+    size: "xxs"
   }, subtitle ? ___EmotionJSX("h3", null, title) : ___EmotionJSX("h2", null, title))), ___EmotionJSX("div", {
     className: "euiTour__content"
   }, content), ___EmotionJSX(EuiPopoverFooter, {
+    css: footerStyles.euiTourFooter,
     className: "euiTourFooter"
   }, footer));
 

package/optimize/es/components/tour/tour_step_indicator.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "number", "status"];
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,23 +13,27 @@ var _excluded = ["className", "number", "status"];
  */
 import React from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { css } from '@emotion/react';
 import { EuiIcon } from '../icon';
 import { EuiI18n } from '../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var statusToClassNameMap = {
-  complete: 'euiTourStepIndicator--complete',
-  incomplete: 'euiTourStepIndicator--incomplete',
-  active: 'euiTourStepIndicator--active'
+
+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__
 };
-export var STATUS = keysOf(statusToClassNameMap);
-export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
-  var className = _ref.className,
-      number = _ref.number,
-      status = _ref.status,
-      rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, className);
+export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
+  var className = _ref2.className,
+      number = _ref2.number,
+      status = _ref2.status,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var classes = classNames('euiTourStepIndicator', className);
   var indicatorIcon;
 
   if (status === 'active') {
@@ -78,6 +84,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
     }
   }, function (ariaLabel) {
     return ___EmotionJSX("li", _extends({
+      css: _ref,
       className: classes,
       "aria-label": ariaLabel
     }, rest), indicatorIcon);

package/optimize/es/global_styling/functions/logicals.js

@@ -119,7 +119,7 @@ export var logicalStyle = function logicalStyle(property, value) {
   var camelCasedProperty = logicals[property].replace(/-\w/g, function (str) {
     return str.charAt(1).toUpperCase();
   });
-  return _defineProperty({}, camelCasedProperty, "".concat(value));
+  return _defineProperty({}, camelCasedProperty, value);
 };
 /**
  *

package/optimize/es/global_styling/mixins/_helpers.js

@@ -80,24 +80,42 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
  *    Others like Safari, won't show anything at all.
  */
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 
 
+// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      height = _ref5.height;
+
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiYScroll = function useEuiYScroll() {
+  var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      height = _ref6.height;
+
   var euiTheme = useEuiTheme();
-  return euiYScroll(euiTheme);
+  return euiYScroll(euiTheme, {
+    height: height
+  });
 };
 export var euiYScrollWithShadows = function euiYScrollWithShadows(euiTheme) {
-  return "\n  ".concat(euiYScroll(euiTheme), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
+  var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      height = _ref7.height;
+
+  return "\n  ".concat(euiYScroll(euiTheme, {
+    height: height
+  }), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
     direction: 'y'
   }), "\n");
 };
 export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
+  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      height = _ref8.height;
+
   var euiTheme = useEuiTheme();
-  return euiYScrollWithShadows(euiTheme);
+  return euiYScrollWithShadows(euiTheme, {
+    height: height
+  });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
   return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
@@ -116,10 +134,10 @@ export var useEuiXScrollWithShadows = function useEuiXScrollWithShadows() {
   return euiXScrollWithShadows(euiTheme);
 };
 export var euiOverflowScroll = function euiOverflowScroll(euiTheme) {
-  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      direction = _ref5.direction,
-      _ref5$mask = _ref5.mask,
-      mask = _ref5$mask === void 0 ? false : _ref5$mask;
+  var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      direction = _ref9.direction,
+      _ref9$mask = _ref9.mask,
+      mask = _ref9$mask === void 0 ? false : _ref9$mask;
 
   switch (direction) {
     case 'y':

package/optimize/es/global_styling/mixins/_responsive.js

@@ -5,39 +5,43 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { sortMapBySmallToLargeValues } from '../../services/breakpoint/_sorting';
 import { useEuiTheme } from '../../services/theme/hooks';
-import { EuiThemeBreakpoints } from '../variables';
+
 /**
  * Generates a CSS media query rule string based on the input breakpoint ranges.
- * Examples:
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
  * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
  *
- * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
- * Examples:
+ * Use the smallest and largest sizes to generate media queries with only min/max-width.
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
  * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
  */
-
 export var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
   var euiTheme = _ref.euiTheme;
-  // Ensure the array is in the correct ascending size order
+  // Ensure we inherit any theme breakpoint overrides & sort by small to large
+  var orderedBreakpoints = Object.keys(sortMapBySmallToLargeValues(euiTheme.breakpoint)); // Ensure the sizes array is in the correct ascending size order
+
   var orderedSizes = sizes.sort(function (a, b) {
-    return EuiThemeBreakpoints.indexOf(a) - EuiThemeBreakpoints.indexOf(b);
+    return orderedBreakpoints.indexOf(a) - orderedBreakpoints.indexOf(b);
   });
   var firstBreakpoint = orderedSizes[0];
   var minBreakpointSize = euiTheme.breakpoint[firstBreakpoint];
   var lastBreakpoint = orderedSizes[sizes.length - 1];
-  var maxBreakpointSize; // To get the correct screen range, we set the max-width
-  // to the next breakpoint size in the sizes array
+  var maxBreakpointSize; // To get the correct screen range, we set the max-width to the next breakpoint
+  // size in the sizes array (unless the size is already the largest breakpoint)
 
-  if (lastBreakpoint !== 'xl') {
-    var nextBreakpoint = EuiThemeBreakpoints.indexOf(lastBreakpoint) + 1;
-    maxBreakpointSize = euiTheme.breakpoint[EuiThemeBreakpoints[nextBreakpoint]];
+  if (lastBreakpoint !== orderedBreakpoints[orderedBreakpoints.length - 1]) {
+    var nextBreakpoint = orderedBreakpoints.indexOf(lastBreakpoint) + 1;
+    maxBreakpointSize = euiTheme.breakpoint[orderedBreakpoints[nextBreakpoint]];
   }
 
-  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If xs/0, don't render a min-width
-  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If xl/undefined, don't render a max-width
+  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If 0, don't render a min-width
+  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If undefined, don't render a max-width
   ].filter(Boolean).join(' and ');
 };
 export var useEuiBreakpoint = function useEuiBreakpoint(sizes) {

package/optimize/es/global_styling/variables/breakpoint.js

@@ -5,4 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl']; // This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs

package/optimize/es/services/breakpoint/_sorting.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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.
+ */
+export var sortMapByLargeToSmallValues = function sortMapByLargeToSmallValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref, _ref2) {
+    var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+
+    return b - a;
+  }));
+};
+export var sortMapBySmallToLargeValues = function sortMapBySmallToLargeValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref5, _ref6) {
+    var _ref7 = _slicedToArray(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = _slicedToArray(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};