@elastic/eui 93.1.1 → 93.3.0

package/test-env/global_styling/mixins/_typography.js

@@ -1,20 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiNumberFormat = exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
+exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typography = require("../functions/typography");
-var _hooks = require("../../services/theme/hooks");
+var _theme = require("../../services/theme");
+var _typography2 = require("../variables/typography");
 var _functions = require("../functions");
-/*
- * 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.
- */
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
 /**
  * Returns font-size and line-height
  */
@@ -27,15 +30,23 @@ var euiFontSize = function euiFontSize(_ref, scale, options) {
 };
 exports.euiFontSize = euiFontSize;
 var useEuiFontSize = function useEuiFontSize(scale, options) {
-  var euiTheme = (0, _hooks.useEuiTheme)();
-  return euiFontSize(euiTheme, scale, options);
+  var euiTheme = (0, _theme.useEuiTheme)();
+  var memoizedFontSizes = (0, _theme.useEuiMemoizedStyles)(euiFontSizes);
+  return !options ? memoizedFontSizes[scale] : euiFontSize(euiTheme, scale, options);
+};
+// Memomize a basic set of font sizes. We unfortunately can't
+// memoize all possible options, there's too many permutations
+exports.useEuiFontSize = useEuiFontSize;
+var euiFontSizes = function euiFontSizes(euiThemeContext) {
+  return _typography2.EuiThemeFontScales.reduce(function (map, scale) {
+    return _objectSpread(_objectSpread({}, map), {}, (0, _defineProperty2.default)({}, scale, euiFontSize(euiThemeContext, scale)));
+  }, {});
 };
 
 /**
  * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
  * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
  */
-exports.useEuiFontSize = useEuiFontSize;
 var euiTextBreakWord = function euiTextBreakWord() {
   return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
@@ -58,9 +69,4 @@ var euiNumberFormat = function euiNumberFormat(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return "\n  font-feature-settings: ".concat(euiTheme.font.featureSettings, ", 'tnum' 1;\n");
 };
-exports.euiNumberFormat = euiNumberFormat;
-var useEuiNumberFormat = function useEuiNumberFormat() {
-  var euiTheme = (0, _hooks.useEuiTheme)();
-  return euiNumberFormat(euiTheme);
-};
-exports.useEuiNumberFormat = useEuiNumberFormat;
+exports.euiNumberFormat = euiNumberFormat;

package/test-env/services/theme/index.js

@@ -117,6 +117,12 @@ Object.defineProperty(exports, "setOn", {
     return _utils.setOn;
   }
 });
+Object.defineProperty(exports, "useEuiMemoizedStyles", {
+  enumerable: true,
+  get: function get() {
+    return _style_memoization.useEuiMemoizedStyles;
+  }
+});
 Object.defineProperty(exports, "useEuiTheme", {
   enumerable: true,
   get: function get() {
@@ -129,6 +135,12 @@ Object.defineProperty(exports, "useEuiThemeCSSVariables", {
     return _hooks.useEuiThemeCSSVariables;
   }
 });
+Object.defineProperty(exports, "withEuiStylesMemoizer", {
+  enumerable: true,
+  get: function get() {
+    return _style_memoization.withEuiStylesMemoizer;
+  }
+});
 Object.defineProperty(exports, "withEuiTheme", {
   enumerable: true,
   get: function get() {
@@ -138,6 +150,7 @@ Object.defineProperty(exports, "withEuiTheme", {
 var _context = require("./context");
 var _hooks = require("./hooks");
 var _provider = require("./provider");
+var _style_memoization = require("./style_memoization");
 var _warning = require("./warning");
 var _utils = require("./utils");
 var _types = require("./types");

package/test-env/services/theme/provider.js

@@ -18,6 +18,7 @@ var _emotion = require("../emotion");
 var _css2 = require("../emotion/css");
 var _context = require("./context");
 var _emotion2 = require("./emotion");
+var _style_memoization = require("./style_memoization");
 var _utils = require("./utils");
 var _excluded = ["cloneElement", "className"];
 var _templateObject;
@@ -161,6 +162,6 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, (0, _react.jsx)(_context.EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, renderedChildren)))))));
+  }, (0, _react.jsx)(_style_memoization.EuiThemeMemoizedStylesProvider, null, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, renderedChildren))))))));
 };
 exports.EuiThemeProvider = EuiThemeProvider;

package/test-env/services/theme/style_memoization.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withEuiStylesMemoizer = exports.useEuiMemoizedStyles = exports.EuiThemeMemoizedStylesProvider = exports.EuiThemeMemoizedStylesContext = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../hooks");
+var _hooks2 = require("./hooks");
+var _react2 = require("@emotion/react");
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/*
+ * 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.
+ */
+
+// NOTE: We're specifically using a WeakMap instead of a Map in order to allow
+// unmounted components to have their styles garbage-collected by the browser
+// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
+
+var EuiThemeMemoizedStylesContext = /*#__PURE__*/(0, _react.createContext)(new WeakMap());
+exports.EuiThemeMemoizedStylesContext = EuiThemeMemoizedStylesContext;
+var EuiThemeMemoizedStylesProvider = function EuiThemeMemoizedStylesProvider(_ref) {
+  var children = _ref.children;
+  // Note: we *should not* use `useMemo` instead of `useState` here, as useMemo is not guaranteed
+  // and its cache can get thrown away by React (https://react.dev/reference/react/useMemo#caveats)
+  var _useState = (0, _react.useState)(new WeakMap()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    componentStyles = _useState2[0],
+    rerenderStyles = _useState2[1];
+
+  // On theme update, wipe the map, which causes the below hook to recompute all styles
+  var _useEuiTheme = (0, _hooks2.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  (0, _hooks.useUpdateEffect)(function () {
+    rerenderStyles(new WeakMap());
+  }, [euiTheme]);
+  return (0, _react2.jsx)(EuiThemeMemoizedStylesContext.Provider, {
+    value: componentStyles
+  }, children);
+};
+
+/**
+ * Internal util primarily responsible for getting the memoized styles (if they exist)
+ * and if not, generating and setting the styles. DRYed out to facilitate usage
+ * between both hook/function components and HOC/class components
+ */
+exports.EuiThemeMemoizedStylesProvider = EuiThemeMemoizedStylesProvider;
+var getMemoizedStyles = function getMemoizedStyles(stylesGenerator, stylesMap, euiThemeContext) {
+  if (!stylesGenerator.name) {
+    throw new Error('Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.');
+  }
+  var existingStyles = stylesMap.get(stylesGenerator);
+  if (existingStyles) {
+    return existingStyles;
+  } else {
+    var generatedStyles = stylesGenerator(euiThemeContext);
+    stylesMap.set(stylesGenerator, generatedStyles);
+    return generatedStyles;
+  }
+};
+
+/**
+ * Hook that memoizes the returned values of components style fns/generators
+ * per-theme
+ */
+var useEuiMemoizedStyles = function useEuiMemoizedStyles(stylesGenerator) {
+  var memoizedStyles = (0, _react.useContext)(EuiThemeMemoizedStylesContext);
+  var euiThemeContext = (0, _hooks2.useEuiTheme)();
+  var memoizedComponentStyles = (0, _react.useMemo)(function () {
+    return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+  }, [stylesGenerator, memoizedStyles, euiThemeContext]);
+  return memoizedComponentStyles;
+};
+
+/**
+ * HOC for class components
+ * Syntax is mostly copied from withEuiTheme HOC
+ */
+exports.useEuiMemoizedStyles = useEuiMemoizedStyles;
+var withEuiStylesMemoizer = function withEuiStylesMemoizer(Component) {
+  var componentName = Component.displayName || Component.name || 'ComponentWithStylesMemoizer';
+  var Render = function Render(props, ref) {
+    var memoizedStyles = (0, _react.useContext)(EuiThemeMemoizedStylesContext);
+    var euiThemeContext = (0, _hooks2.useEuiTheme)();
+    var stylesMemoizer = (0, _react.useCallback)(function (stylesGenerator) {
+      return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+    }, [memoizedStyles, euiThemeContext]);
+    return (0, _react2.jsx)(Component, (0, _extends2.default)({
+      stylesMemoizer: stylesMemoizer,
+      ref: ref
+    }, props));
+  };
+  var WithEuiStylesMemoizer = /*#__PURE__*/(0, _react.forwardRef)(Render);
+  WithEuiStylesMemoizer.displayName = componentName;
+  return WithEuiStylesMemoizer;
+};
+exports.withEuiStylesMemoizer = withEuiStylesMemoizer;

package/test-env/themes/amsterdam/global_styling/mixins/button.js

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
 var _services = require("../../../../services");
+var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,9 +18,10 @@ var _services = require("../../../../services");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 var BUTTON_COLORS = ['text', 'accent', 'primary', 'success', 'warning', 'danger'];
 exports.BUTTON_COLORS = BUTTON_COLORS;
+var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
+exports.BUTTON_DISPLAYS = BUTTON_DISPLAYS;
 /**
  * Creates the `base` version of button styles with proper text contrast.
  * @param euiThemeContext
@@ -139,43 +142,63 @@ var euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, color) {
 exports.euiButtonEmptyColor = euiButtonEmptyColor;
 var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var euiThemeContext = (0, _services.useEuiTheme)();
-  function stylesByDisplay(color) {
-    return {
-      base: /*#__PURE__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), ";;label:base;"),
-      fill: /*#__PURE__*/(0, _react.css)(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:fill;"),
-      empty: /*#__PURE__*/(0, _react.css)("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:empty;")
-    };
-  }
-  return {
-    text: /*#__PURE__*/(0, _react.css)(stylesByDisplay('text')[options.display || 'base'], ";label:text;"),
-    accent: /*#__PURE__*/(0, _react.css)(stylesByDisplay('accent')[options.display || 'base'], ";label:accent;"),
-    primary: /*#__PURE__*/(0, _react.css)(stylesByDisplay('primary')[options.display || 'base'], ";label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)(stylesByDisplay('success')[options.display || 'base'], ";label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)(stylesByDisplay('warning')[options.display || 'base'], ";label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)(stylesByDisplay('danger')[options.display || 'base'], ";label:danger;"),
-    disabled: /*#__PURE__*/(0, _react.css)(stylesByDisplay('disabled')[options.display || 'base'], ";label:disabled;")
-  };
+  var _options$display = options.display,
+    display = _options$display === void 0 ? 'base' : _options$display;
+  var colorsDisplaysMap = (0, _services.useEuiMemoizedStyles)(euiButtonDisplaysColors);
+  return colorsDisplaysMap[display];
+};
+exports.useEuiButtonColorCSS = useEuiButtonColorCSS;
+var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
+  var COLORS = [].concat(BUTTON_COLORS, ['disabled']);
+  var displaysColorsMap = {};
+  BUTTON_DISPLAYS.forEach(function (display) {
+    displaysColorsMap[display] = {};
+    COLORS.forEach(function (color) {
+      switch (display) {
+        case 'base':
+          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'fill':
+          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'empty':
+          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:displaysColorsMap-display-color;");
+          break;
+      }
+
+      // Tweak auto-generated Emotion label/className output
+      var emotionOutput = displaysColorsMap[display][color];
+      emotionOutput.styles = emotionOutput.styles.replace('label:displaysColorsMap-display-color;', "label:".concat(display, "-").concat(color, ";"));
+    });
+  });
+  return displaysColorsMap;
 };
 
 /**
  * Creates the translate animation when button is in focus.
  * @returns string
  */
-exports.useEuiButtonColorCSS = useEuiButtonColorCSS;
 var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme.euiTheme;
-  return "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
+  return (0, _services.useEuiMemoizedStyles)(euiButtonFocusCSS);
+};
+exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
+var euiButtonFocusAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    transform: translateY(1px);\n  }\n"])));
+var euiButtonFocusCSS = function euiButtonFocusCSS(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var focusCSS = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ease-in-out,background-color ", euiTheme.animation.normal, " ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:", euiButtonFocusAnimation, " ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";}&:active:not(:disabled){transform:translateY(1px);}};label:focusCSS;");
+  // Remove the auto-generated label.
+  // We could typically avoid a label by using a plain string `` instead of css``,
+  // but we need css`` for keyframes`` to work for the focus animation
+  focusCSS.styles = focusCSS.styles.replace('label:focusCSS;', '');
+  return focusCSS;
 };
 
 /**
  * Map of `size` props to various sizings/scales
  * that should remain consistent across all buttons
  */
-exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
-var euiButtonSizeMap = function euiButtonSizeMap(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiButtonSizeMap = function euiButtonSizeMap(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     xs: {
       height: euiTheme.size.l,

package/src/components/side_nav/_index.scss

@@ -1,5 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'side_nav';
-@import 'side_nav_item';

package/src/components/side_nav/_mixins.scss

@@ -1,7 +0,0 @@
-// stylelint-disable color-named
-
-@mixin euiSideNavEmbellish {
-  background:
-    linear-gradient(160deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSizeXL, rgba(red, 0) 0),
-    linear-gradient(175deg, $euiSideNavEmphasizedBackgroundColor 0, $euiSideNavEmphasizedBackgroundColor $euiSize, rgba(red, 0) 0);
-}

package/src/components/side_nav/_side_nav.scss

@@ -1,47 +0,0 @@
-// These mobile children are hidden in everything but mobile view.
-.euiSideNav__mobileToggle {
-  height: auto;
-  border-bottom: $euiBorderThin;
-  width: 100%;
-  text-align: left;
-  border-radius: 0 !important; // stylelint-disable-line declaration-no-important
-  font-size: $euiFontSizeM;
-  padding: 0 $euiSize; // This plus the inner padding is equal to paddingSize large for EuiPage
-
-  .euiSideNav__mobileToggleText {
-    padding: $euiSize 0;
-  }
-
-  .euiSideNav__mobileToggleContent {
-    justify-content: space-between;
-  }
-}
-
-.euiSideNav__heading {
-  margin-bottom: $euiSizeL;
-}
-
-// Loop through the breakpoints and apply mobile styles only to the right className
-// stylelint-disable max-nesting-depth
-@each $breakpoint in $euiBreakpointKeys {
-  @include euiBreakpoint($breakpoint) {
-    .euiSideNav__contentMobile-#{$breakpoint} {
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      max-height: 0;
-      padding: 0 $euiSizeL;
-
-      .euiSideNav-isOpenMobile & {
-        visibility: visible;
-        opacity: 1;
-        padding: $euiSizeL;
-        max-height: 5000px; /* 1 */
-
-        @include euiCanAnimate {
-          transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
-        }
-      }
-    }
-  }
-}

package/src/components/side_nav/_side_nav_item.scss

@@ -1,181 +0,0 @@
-/**
- * 1. Text-align defaults to center, so we have to override that.
- * 2. Color the text at the item level and then have the button inherit so overrides are easier
- * 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/)
- * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within
- */
-
-.euiSideNavItemButton {
-  @include euiFontSizeS;
-  text-align: left; /* 1 */
-  display: block;
-  width: 100%;
-  padding: ($euiSizeXS / 2) 0;
-  color: inherit; /* 2 */
-
-  &.euiSideNavItemButton--isClickable:not(:disabled) {
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover,
-    &:focus {
-      .euiSideNavItemButton__label {
-        // A lingering focus will stay underlined even if it doesn't get the `isSelected` prop
-        text-decoration: underline; /* 4 */
-      }
-    }
-  }
-
-  &.euiSideNavItemButton-isSelected {
-    color: $euiSideNavSelectedTextcolor;
-    font-weight: $euiFontWeightBold;
-
-    .euiSideNavItemButton__label {
-      text-decoration: underline; /* 4 */
-    }
-  }
-
-  &:disabled {
-    @include euiDisabledState($euiSideNavDisabledTextcolor);
-  }
-}
-
-.euiSideNavItemButton__content {
-  display: flex;
-  align-items: center;
-}
-
-.euiSideNavItemButton__icon {
-  margin-right: $euiSizeS;
-}
-
-.euiSideNavItemButton__labelContainer {
-  min-width: 0; /* 3 */
-}
-
-.euiSideNavItemButton__label {
-  flex-grow: 1;
-}
-
-.euiSideNavItemButton__label--truncated {
-  @include euiTextTruncate;
-}
-
-.euiSideNavItem--root {
-  &.euiSideNavItem--rootIcon > .euiSideNavItem__items {
-    margin-left: $euiSizeL;
-  }
-
-  /**
-   * 1. Create padding around focus area without indenting the item itself.
-   */
-  & > .euiSideNavItemButton {
-    margin-bottom: $euiSizeS;
-    padding: 0;
-    padding-left: $euiSizeS; /* 1 */
-    padding-right: $euiSizeS; /* 1 */
-    margin-left: -$euiSizeS; /* 1 */
-    width: calc(100% + #{$euiSizeS * 2}); /* 1 */
-
-    .euiSideNavItemButton__label {
-      @include euiTitle('xs');
-      color: inherit;
-    }
-  }
-
-  & > .euiSideNavItem__items {
-    position: static;
-    margin-left: 0;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  & + & {
-    margin-top: $euiSizeXL;
-  }
-}
-
-.euiSideNavItem--trunk {
-  color: $euiSideNavRootTextcolor; /* 2 */
-
-  /**
-   * 1. Create padding around focus area without indenting the item itself.
-   */
-  & > .euiSideNavItemButton {
-    padding-left: $euiSizeS; /* 1 */
-    padding-right: $euiSizeS; /* 1 */
-    margin-left: -$euiSizeS; /* 1 */
-    width: calc(100% + #{$euiSizeS * 2}); /* 1 */
-  }
-
-  & > .euiSideNavItem__items {
-    margin-left: $euiSizeS;
-    width: 100%;
-  }
-}
-
-.euiSideNavItem--branch {
-  /**
-  * 1. Draw the vertical line to group an expanded item's child items together.
-  */
-  position: relative;
-  color: $euiSideNavBranchTextcolor; /* 2 */
-
-  &::after { /* 1 */
-    position: absolute;
-    content: '';
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: $euiBorderColor;
-    left: 0;
-  }
-
-  // If this is actually the last item, we don't want the vertical line to stretch all the way down
-  &:last-of-type::after {
-    height: $euiSizeM;
-  }
-
-  /**
-   * 2. Absolutely position the horizontal tick connecting the item to the vertical line.
-   */
-  & > .euiSideNavItemButton {
-    position: relative; /* 2 */
-    padding-left: $euiSizeS;
-    padding-right: $euiSizeS; /* 2 */
-
-    &::after {
-      position: absolute; /* 2 */
-      content: '';
-      top: $euiSizeM;
-      left: 0;
-      width: $euiSizeXS;
-      height: 1px;
-      background: $euiBorderColor;
-    }
-  }
-
-  & > .euiSideNavItem__items {
-    margin-left: $euiSize;
-  }
-}
-
-.euiSideNavItem--emphasized {
-  background: $euiSideNavEmphasizedBackgroundColor;
-  color: $euiSideNavRootTextcolor;
-  // The large y values allow the shadow to stretch beyond the side nav bounds to it's parents container
-  box-shadow: 100px 0 0 0 $euiSideNavEmphasizedBackgroundColor, -100px 0 0 0 $euiSideNavEmphasizedBackgroundColor;
-
-  > .euiSideNavItemButton {
-    font-weight: $euiFontWeightBold;
-  }
-
-  // Remove any extra box-shadows from nested emphasized items
-  .euiSideNavItem--emphasized {
-    background: transparent;
-    box-shadow: none;
-  }
-}

package/src/components/side_nav/_variables.scss

@@ -1,15 +0,0 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-
-// Simulates the transparent backround on top of the page background to get an opaque color
-// in order to get the right contrast for text
-@function euiSideNavEmphasizedContrast($textColor, $ratio: $euiContrastRatioText) {
-  $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorLightShade, 70%);
-  $color: makeHighContrastColor($textColor, $backgroundColorSimulated, $ratio);
-  @return $color;
-}
-
-// Ensure all the possible text color have proper contrast when "emphasized"
-$euiSideNavRootTextcolor: euiSideNavEmphasizedContrast($euiTitleColor);
-$euiSideNavBranchTextcolor: euiSideNavEmphasizedContrast($euiTextSubduedColor);
-$euiSideNavSelectedTextcolor: euiSideNavEmphasizedContrast($euiColorPrimary);
-$euiSideNavDisabledTextcolor: euiSideNavEmphasizedContrast($euiButtonColorDisabledText, $euiContrastRatioDisabled);

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

@@ -1,17 +0,0 @@
-.euiSideNavItem--root {
-  padding-bottom: $euiSizeS;
-
-  & + & {
-    padding-top: $euiSizeS;
-    margin-top: $euiSizeS;
-  }
-
-  & > .euiSideNavItemButton {
-    margin-bottom: $euiSizeXS;
-
-    .euiSideNavItemButton__label {
-      @include euiTitle('xxs');
-      color: inherit;
-    }
-  }
-}