@elastic/eui 59.1.0-rc1 → 60.0.0

package/optimize/es/components/text/text_color.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "color", "component", "cloneElement", "style", "euiTheme"];
+var _excluded = ["children", "color", "component", "cloneElement", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -15,11 +15,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { isValidElement } from 'react';
 import { cloneElementWithCss } from '../../services/theme/clone_element';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
-export var _EuiTextColor = function _EuiTextColor(_ref) {
+export var EuiTextColor = function EuiTextColor(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'default' : _ref$color,
@@ -28,10 +28,10 @@ export var _EuiTextColor = function _EuiTextColor(_ref) {
       _ref$cloneElement = _ref.cloneElement,
       cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
       style = _ref.style,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var isNamedColor = COLORS.includes(color);
+  var euiTheme = useEuiTheme();
   var styles = euiTextColorStyles(euiTheme);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor]; // We're checking if is a custom color.
   // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
@@ -56,5 +56,4 @@ export var _EuiTextColor = function _EuiTextColor(_ref) {
     var Component = component;
     return ___EmotionJSX(Component, props, children);
   }
-};
-export var EuiTextColor = withEuiSystem(_EuiTextColor);
+};

package/optimize/es/components/timeline/timeline.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "items", "children"];
+var _excluded = ["className", "items", "children", "gutterSize"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,19 +11,28 @@ var _excluded = ["className", "items", "children"];
  */
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
 import { EuiTimelineItem } from './timeline_item';
+import { euiTimelineStyles } from './timeline.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var GUTTER_SIZES = ['m', 'l', 'xl'];
 export var EuiTimeline = function EuiTimeline(_ref) {
   var className = _ref.className,
       _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
       children = _ref.children,
+      _ref$gutterSize = _ref.gutterSize,
+      gutterSize = _ref$gutterSize === void 0 ? 'xl' : _ref$gutterSize,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiTimeline', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiTimelineStyles(euiTheme);
+  var cssStyles = [styles.euiTimeline, styles[gutterSize]];
   return (// eslint-disable-next-line jsx-a11y/no-redundant-roles
     ___EmotionJSX("ol", _extends({
       className: classes,
+      css: cssStyles,
       role: "list"
     }, rest), items.map(function (item, index) {
       return ___EmotionJSX(EuiTimelineItem, _extends({

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { logicalCSS } from '../../global_styling';
+
+var _gutterSizeAdjustment = function _gutterSizeAdjustment(gutterSize) {
+  return "\n    gap: ".concat(gutterSize, ";\n\n    // The vertical line height needs to be adjusted with the gutter size\n    [class*='euiTimelineItem-']:not(:last-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('height', "calc(100% + ".concat(gutterSize, ")")), ";\n    }\n  ");
+}; // The vertical line should only appear when the EuiTimelineItem's
+// are wrapped in a EuiTimeline. That's why these styles live here.
+
+
+var timelineVerticalLine = function timelineVerticalLine(euiTheme) {
+  return "  \n    [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('top', 0), ";\n      ").concat(logicalCSS('width', euiTheme.size.xxs), ";\n      background-color: ").concat(euiTheme.colors.lightShade, ";\n    }\n\n    > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('height', '50%'), ";\n    }\n  ");
+};
+
+export var euiTimelineStyles = function euiTimelineStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiTimeline: /*#__PURE__*/css("display:flex;flex-direction:column;", timelineVerticalLine(euiTheme), ";;label:euiTimeline;"),
+    m: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.base), ";label:m;"),
+    l: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.l), ";label:l;"),
+    xl: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.xl), ";label:xl;")
+  };
+};

package/optimize/es/components/timeline/timeline_item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className", "component", "euiTheme"];
+var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,28 +10,23 @@ var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "classNam
  * Side Public License, v 1.
  */
 import React from 'react';
-import { withEuiSystem } from '../provider/system';
 import { EuiTimelineItemEvent } from './timeline_item_event';
 import { EuiTimelineItemIcon } from './timeline_item_icon';
 import { euiTimelineItemStyles } from './timeline_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var VERTICAL_ALIGN = ['top', 'center'];
-export var _EuiTimelineItem = function _EuiTimelineItem(_ref) {
+export var EuiTimelineItem = function EuiTimelineItem(_ref) {
   var children = _ref.children,
       _ref$verticalAlign = _ref.verticalAlign,
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
       icon = _ref.icon,
       iconAriaLabel = _ref.iconAriaLabel,
       className = _ref.className,
-      _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'li' : _ref$component,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var styles = euiTimelineItemStyles(euiTheme);
-  var cssStyles = [styles.euiTimelineItem];
-  var Element = component;
-  return ___EmotionJSX(Element, _extends({
+  var styles = euiTimelineItemStyles();
+  var cssStyles = [styles.euiTimelineItem, styles[verticalAlign]];
+  return ___EmotionJSX("li", _extends({
     css: cssStyles
   }, rest), ___EmotionJSX(EuiTimelineItemIcon, {
     icon: icon,
@@ -40,5 +35,4 @@ export var _EuiTimelineItem = function _EuiTimelineItem(_ref) {
   }), ___EmotionJSX(EuiTimelineItemEvent, {
     verticalAlign: verticalAlign
   }, children));
-};
-export var EuiTimelineItem = withEuiSystem(_EuiTimelineItem);
+};

package/optimize/es/components/timeline/timeline_item.styles.js

@@ -1,3 +1,5 @@
+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
@@ -6,9 +8,22 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-export var euiTimelineItemStyles = function euiTimelineItemStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "5bggde-euiTimelineItem",
+  styles: "display:flex;position:relative;label:euiTimelineItem;"
+} : {
+  name: "5bggde-euiTimelineItem",
+  styles: "display:flex;position:relative;label:euiTimelineItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiTimelineItemStyles = function euiTimelineItemStyles() {
   return {
-    euiTimelineItem: /*#__PURE__*/css("display:flex;&:not(:last-of-type){padding-bottom:", euiTheme.size.xl, ";}&:first-of-type{>[class*='euiTimelineItemIcon-center']::before{top:50%;height:calc(50% + ", euiTheme.size.xl, ");}}&:last-of-type{>[class*='euiTimelineItemIcon']::before{display:none;}&:not(:only-child)>[class*='euiTimelineItemIcon-center']::before{top:0;height:50%;}};label:euiTimelineItem;")
+    euiTimelineItem: _ref,
+    // Vertical alignments
+    // These classes are being targeted in timeline.styles.ts
+    top: /*#__PURE__*/css(";label:top;"),
+    center: /*#__PURE__*/css(";label:center;")
   };
 };

package/optimize/es/components/timeline/timeline_item_icon.js

@@ -7,15 +7,15 @@
  */
 import React from 'react';
 import { EuiAvatar } from '../avatar';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiTimelineItemIconStyles } from './timeline_item_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var _EuiTimelineItemIcon = function _EuiTimelineItemIcon(_ref) {
+export var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
   var icon = _ref.icon,
       _ref$verticalAlign = _ref.verticalAlign,
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
-      iconAriaLabel = _ref.iconAriaLabel,
-      euiTheme = _ref.euiTheme;
+      iconAriaLabel = _ref.iconAriaLabel;
+  var euiTheme = useEuiTheme();
   var styles = euiTimelineItemIconStyles(euiTheme);
   var cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
   var cssContentStyles = styles.euiTimelineItemIcon__content;
@@ -30,5 +30,4 @@ export var _EuiTimelineItemIcon = function _EuiTimelineItemIcon(_ref) {
   }, ___EmotionJSX("div", {
     css: cssContentStyles
   }, iconRender));
-};
-export var EuiTimelineItemIcon = withEuiSystem(_EuiTimelineItemIcon);
+};

package/optimize/es/components/timeline/timeline_item_icon.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8391db-center",
@@ -27,11 +28,20 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiTimelineItemIconStyles = function euiTimelineItemIconStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "kuz8oa-euiTimelineItemIcon__content",
+  styles: "display:flex;justify-content:center;align-items:center;position:relative;label:euiTimelineItemIcon__content;"
+} : {
+  name: "kuz8oa-euiTimelineItemIcon__content",
+  styles: "display:flex;justify-content:center;align-items:center;position:relative;label:euiTimelineItemIcon__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiTimelineItemIconStyles = function euiTimelineItemIconStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return {
-    euiTimelineItemIcon: /*#__PURE__*/css("display:flex;position:relative;flex-grow:0;margin-right:", euiTheme.size.base, ";&::before{content:'';position:absolute;top:0;left:calc(", euiTheme.size.xxl, " / 2);width:calc(", euiTheme.size.xs, " / 2);height:calc(100% + ", euiTheme.size.xl, ");background-color:", euiTheme.colors.lightShade, ";};label:euiTimelineItemIcon;"),
-    euiTimelineItemIcon__content: /*#__PURE__*/css("min-width:", euiTheme.size.xxl, ";display:flex;justify-content:center;align-items:center;position:relative;;label:euiTimelineItemIcon__content;"),
+    euiTimelineItemIcon: /*#__PURE__*/css("display:flex;position:relative;flex-grow:0;justify-content:center;", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiTimelineItemIcon;"),
+    euiTimelineItemIcon__content: _ref3,
     //  Vertical alignments
     top: _ref2,
     center: _ref

package/optimize/es/components/title/title.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "children", "className", "textTransform", "euiTheme"];
+var _excluded = ["size", "children", "className", "textTransform"];
 
 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; }
 
@@ -14,20 +14,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
 import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { euiTitleStyles } from './title.styles';
-import { withEuiSystem } from '../provider/system';
 export var TITLE_SIZES = ['xxxs', 'xxs', 'xs', 's', 'm', 'l'];
 export var TEXT_TRANSFORM = ['uppercase'];
-export var _EuiTitle = function _EuiTitle(_ref) {
+export var EuiTitle = function EuiTitle(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       children = _ref.children,
       className = _ref.className,
       textTransform = _ref.textTransform,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var styles = euiTitleStyles(euiTheme);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = classNames('euiTitle', className, children.props.className);
@@ -38,5 +38,4 @@ export var _EuiTitle = function _EuiTitle(_ref) {
   }, rest);
 
   return cloneElementWithCss(children, props);
-};
-export var EuiTitle = withEuiSystem(_EuiTitle);
+};

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

@@ -46,9 +46,9 @@ var logicalPaddings = {
 };
 var logicalPosition = {
   top: 'inset-block-start',
-  right: 'inset-inline-start',
+  right: 'inset-inline-end',
   bottom: 'inset-block-end',
-  left: 'inset-inline-end',
+  left: 'inset-inline-start',
   horizontal: 'inset-block',
   vertical: 'inset-inline',
   inset: 'inset'

package/optimize/es/global_styling/utility/utility.js

@@ -1,5 +1,3 @@
-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
@@ -10,18 +8,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React from 'react';
 import { Global, css } from '@emotion/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "bd8dxy-EuiUtilityClasses",
-  styles: ".euiYolo{color:coral;};label:EuiUtilityClasses;"
-} : {
-  name: "bd8dxy-EuiUtilityClasses",
-  styles: ".euiYolo{color:coral;};label:EuiUtilityClasses;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
 export var EuiUtilityClasses = function EuiUtilityClasses() {
   return ___EmotionJSX(Global, {
-    styles: _ref
+    styles: /*#__PURE__*/css(";label:EuiUtilityClasses;")
   });
 };

package/optimize/es/test/emotion-prefix.js

@@ -0,0 +1,27 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _setPrototypeOf from "@babel/runtime/helpers/setPrototypeOf";
+
+function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); _groups.set(_this, groups || _groups.get(re)); return _setPrototypeOf(_this, BabelRegExp.prototype); } _inherits(BabelRegExp, RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; if (_typeof(args[args.length - 1]) !== "object") { args = [].slice.call(args); args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }
+
+/*
+ * 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 replaceEmotionPrefix = function replaceEmotionPrefix(selector) {
+  var _euiMatch$groups;
+
+  // Matches the Emotion className pattern + the EUI variant naming convention.
+  // Starts with `css-[hash]-`.
+  // Contains `eui[ComponentName] or `Eui[ComponentName]`.
+  // Capture the component name (from above) and all variant additions until the end of the string.
+  var euiMatch = selector.match( /*#__PURE__*/_wrapRegExp(/css\x2D[0-9A-Z_a-z]{6,}\x2D([Ee]ui[A-Z][\x2D0-9A-Z_a-z]*$)/, {
+    euiComponent: 1
+  })); // Use the captured group (`euiComponent`) if available and prepend with `emotion-`,
+  // otherwise use the full selector.
+
+  return euiMatch !== null && euiMatch !== void 0 && (_euiMatch$groups = euiMatch.groups) !== null && _euiMatch$groups !== void 0 && _euiMatch$groups.euiComponent ? "emotion-".concat(euiMatch.groups.euiComponent) : selector;
+};

package/optimize/es/test/index.d.ts

@@ -36,6 +36,10 @@ declare module '@elastic/eui/optimize/es/test/react_warnings' {
 declare module '@elastic/eui/optimize/es/test/sleep' {
 	export function sleep(ms?: number): Promise<unknown>;
 
+}
+declare module '@elastic/eui/optimize/es/test/emotion-prefix' {
+	export const replaceEmotionPrefix: (selector: string) => string;
+
 }
 declare module '@elastic/eui/optimize/es/test' {
 	export { requiredProps } from '@elastic/eui/optimize/es/test/required_props';
@@ -43,5 +47,6 @@ declare module '@elastic/eui/optimize/es/test' {
 	export { findTestSubject } from '@elastic/eui/optimize/es/test/find_test_subject';
 	export { startThrowingReactWarnings, stopThrowingReactWarnings, } from '@elastic/eui/optimize/es/test/react_warnings';
 	export { sleep } from '@elastic/eui/optimize/es/test/sleep';
+	export * from '@elastic/eui/optimize/es/test/emotion-prefix';
 
 }

package/optimize/es/test/index.js

@@ -9,4 +9,5 @@ export { requiredProps } from './required_props';
 export { takeMountedSnapshot } from './take_mounted_snapshot';
 export { findTestSubject } from './find_test_subject';
 export { startThrowingReactWarnings, stopThrowingReactWarnings } from './react_warnings';
-export { sleep } from './sleep';
+export { sleep } from './sleep';
+export * from './emotion-prefix';

package/optimize/es/{components/provider/system → themes/amsterdam}/index.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 * from './system';
+// Only globally export the mixins we allow consumers to re-use
+export * from './global_styling/mixins/shadow';

package/optimize/es/themes/index.js

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 export { EUI_THEMES, isDefaultTheme } from './themes';
-export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme';
+export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme';
+export * from './amsterdam';

package/optimize/lib/components/accessibility/skip_link/skip_link.js

@@ -5,19 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiSkipLink = exports.POSITIONS = exports.EuiSkipLink = void 0;
+exports.POSITIONS = exports.EuiSkipLink = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _button = require("../../button/button");
+var _services = require("../../../services");
 
-var _system = require("../../provider/system");
+var _button = require("../../button/button");
 
 var _screen_reader_only = require("../screen_reader_only");
 
@@ -25,19 +27,25 @@ var _skip_link = require("./skip_link.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className", "euiTheme"];
+var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
+
+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) { (0, _defineProperty2.default)(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; }
+
 var POSITIONS = ['static', 'fixed', 'absolute'];
 exports.POSITIONS = POSITIONS;
 
-var _EuiSkipLink = function _EuiSkipLink(_ref) {
+var EuiSkipLink = function EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
+      overrideLinkBehavior = _ref.overrideLinkBehavior,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
       children = _ref.children,
       className = _ref.className,
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _skip_link.euiSkipLinkStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiSkipLink', className);
   var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined]; // Create the `href` from `destinationId`
@@ -50,6 +58,22 @@ var _EuiSkipLink = function _EuiSkipLink(_ref) {
     };
   }
 
+  if (overrideLinkBehavior) {
+    optionalProps = _objectSpread(_objectSpread({}, optionalProps), {}, {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        var destinationEl = document.getElementById(destinationId);
+        if (!destinationEl) return;
+        destinationEl.scrollIntoView();
+        destinationEl.tabIndex = -1; // Ensure the destination content is focusable
+
+        destinationEl.focus({
+          preventScroll: true
+        }); // Scrolling is already handled above, and focus's autoscroll behaves oddly around fixed headers
+      }
+    });
+  }
+
   return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
     showOnFocus: true
   }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
@@ -61,6 +85,4 @@ var _EuiSkipLink = function _EuiSkipLink(_ref) {
   }, optionalProps, rest), children));
 };
 
-exports._EuiSkipLink = _EuiSkipLink;
-var EuiSkipLink = (0, _system.withEuiSystem)(_EuiSkipLink);
 exports.EuiSkipLink = EuiSkipLink;

package/optimize/lib/components/accessibility/skip_link/skip_link.styles.js

@@ -35,7 +35,7 @@ var euiSkipLinkStyles = function euiSkipLinkStyles(_ref3) {
     // Set positions on focus only as to not override screenReaderOnly position
     // When positioned absolutely, consumers still need to tell it WHERE (top,left,etc...)
     absolute: _ref,
-    fixed: /*#__PURE__*/(0, _react.css)("&:focus{position:fixed;inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
+    fixed: /*#__PURE__*/(0, _react.css)("position:fixed!important;&:focus{inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
   };
 };
 

package/optimize/lib/components/avatar/avatar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkValidColor = exports._EuiAvatar = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
+exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,8 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _color = require("../../services/color");
 
-var _system = require("../provider/system");
-
 var _services = require("../../services");
 
 var _icon = require("../icon");
@@ -31,18 +29,17 @@ var _avatar = require("./avatar.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "color", "euiTheme", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var TYPES = ['space', 'user'];
 exports.TYPES = TYPES;
 
-var _EuiAvatar = function _EuiAvatar(_ref) {
+var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
 
   var className = _ref.className,
       color = _ref.color,
-      euiTheme = _ref.euiTheme,
       imageUrl = _ref.imageUrl,
       initials = _ref.initials,
       initialsLength = _ref.initialsLength,
@@ -58,6 +55,7 @@ var _EuiAvatar = function _EuiAvatar(_ref) {
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
   var visColors = (0, _services.euiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
@@ -110,10 +108,8 @@ var _EuiAvatar = function _EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-};
+}; // TODO: Migrate to a service
 
-exports._EuiAvatar = _EuiAvatar;
-var EuiAvatar = (0, _system.withEuiSystem)(_EuiAvatar); // TODO: Migrate to a service
 
 exports.EuiAvatar = EuiAvatar;
 

package/optimize/lib/components/bottom_bar/bottom_bar.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.paddingSizeToClassNameMap = exports._EuiBottomBar = exports.POSITIONS = exports.EuiBottomBar = void 0;
+exports.paddingSizeToClassNameMap = exports.POSITIONS = exports.EuiBottomBar = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,15 +31,13 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _portal = require("../portal");
 
-var _system = require("../provider/system");
+var _bottom_bar = require("./bottom_bar.styles");
 
 var _provider = require("../../services/theme/provider");
 
-var _bottom_bar = require("./bottom_bar.styles");
-
 var _react2 = require("@emotion/react");
 
-var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style", "euiTheme"];
+var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style"];
 
 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); }
 
@@ -81,8 +79,8 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       bottom = _ref$bottom === void 0 ? 0 : _ref$bottom,
       top = _ref.top,
       style = _ref.style,
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _bottom_bar.euiBottomBarStyles)(euiTheme); // Force some props if `fixed` position, but not if the user has supplied these
 
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -156,11 +154,10 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return usePortal ? (0, _react2.jsx)(_portal.EuiPortal, null, bar) : bar;
 });
 
-exports._EuiBottomBar = _EuiBottomBar;
 var EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var BottomBar = (0, _system.withEuiSystem)(_EuiBottomBar);
+  var BottomBar = _EuiBottomBar;
   return (0, _react2.jsx)(_provider.EuiThemeProvider, {
-    colorMode: "dark"
+    colorMode: 'dark'
   }, (0, _react2.jsx)(BottomBar, (0, _extends2.default)({
     ref: ref
   }, props)));

package/optimize/lib/components/breadcrumbs/breadcrumbs.js

@@ -183,8 +183,7 @@ var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
         }, linkProps, breadcrumbRest), text);
       }
 
-      return (0, _react2.jsx)(_link.EuiLink // @ts-expect-error Ref forwarding type mismatch
-      , (0, _extends2.default)({
+      return (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({
         ref: ref,
         color: isLastBreadcrumb ? 'text' : 'subdued',
         onClick: onClick,