@elastic/eui 58.0.0 → 59.0.0

package/lib/components/tour/useEuiTour.js

@@ -17,11 +17,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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 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; }
 

package/lib/components/tree_view/tree_view.js

@@ -27,11 +27,13 @@ var _inner_text = require("../inner_text");
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -45,7 +47,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
@@ -63,11 +65,11 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -272,7 +274,7 @@ var EuiTreeView = /*#__PURE__*/function (_Component) {
           display = _this$props$display === void 0 ? 'default' : _this$props$display,
           expandByDefault = _this$props.expandByDefault,
           showExpansionArrows = _this$props.showExpansionArrows,
-          rest = _objectWithoutProperties(_this$props, ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows"]); // Computed classNames
+          rest = _objectWithoutProperties(_this$props, _excluded); // Computed classNames
 
 
       var classes = (0, _classnames.default)('euiTreeView', display ? displayToClassNameMap[display] : null, {

package/lib/global_styling/functions/index.js

@@ -8,6 +8,7 @@ var _logicals = require("./logicals");
 
 Object.keys(_logicals).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _logicals[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -20,6 +21,7 @@ var _size = require("./size");
 
 Object.keys(_size).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _size[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -32,6 +34,7 @@ var _typography = require("./typography");
 
 Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _typography[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {

package/lib/global_styling/functions/logicals.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.logicalText = exports.logicalStyle = exports.logicalCSS = exports.LOGICAL_PROPERTIES = exports.logicals = exports.LOGICAL_SIDES = exports.logicalSide = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSide = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
 
 var _common = require("../../components/common");
 
-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 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; }
 
@@ -67,14 +67,38 @@ var logicalOverflow = {
   'overflow-x': 'overflow-block',
   'overflow-y': 'overflow-inline'
 };
-var logicalRadius = {
+var logicalBorders = {
+  'border-horizontal': 'border-inline',
+  'border-horizontal-color': 'border-inline-color',
+  'border-horizontal-width': 'border-inline-width',
+  'border-horizontal-style': 'border-inline-style',
+  'border-vertical': 'border-block',
+  'border-vertical-color': 'border-block-color',
+  'border-vertical-width': 'border-block-width',
+  'border-vertical-style': 'border-block-style',
+  'border-bottom': 'border-block-end',
+  'border-bottom-color': 'border-block-end-color',
+  'border-bottom-style': 'border-block-end-style',
+  'border-bottom-width': 'border-block-end-width',
+  'border-top': 'border-block-start',
+  'border-top-color': 'border-block-start-color',
+  'border-top-style': 'border-block-start-style',
+  'border-top-width': 'border-block-start-width',
+  'border-right': 'border-inline-end',
+  'border-right-color': 'border-inline-end-color',
+  'border-right-style': 'border-inline-end-style',
+  'border-right-width': 'border-inline-end-width',
+  'border-left': 'border-inline-start',
+  'border-left-color': 'border-inline-start-color',
+  'border-left-style': 'border-inline-start-style',
+  'border-left-width': 'border-inline-start-width',
   'border-top-left-radius': 'border-start-start-radius',
   'border-top-right-radius': 'border-start-end-radius',
   'border-bottom-left-radius': 'border-end-start-radius',
   'border-bottom-right-radius': 'border-end-end-radius'
 };
 
-var logicals = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, logicalMargins), logicalPaddings), logicalPosition), logicalSize), logicalOverflow), logicalRadius);
+var logicals = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, logicalMargins), logicalPaddings), logicalPosition), logicalSize), logicalOverflow), logicalBorders);
 
 exports.logicals = logicals;
 var LOGICAL_PROPERTIES = (0, _common.keysOf)(logicals);

package/lib/global_styling/functions/typography.js

@@ -19,20 +19,25 @@ exports.euiTextShift = void 0;
  * Calculates the font-size value based on the provided scale key
  * @param scale - The font scale key
  * @param theme - Requires the `base` and `font` keys
- * @param measurement - The returned string measurement
- * *
+ * @param options - Optional parameters - see _FontScaleOptions
+ *
  * @returns string - Calculated font-size value
  */
 function euiFontSizeFromScale(scale, _ref) {
   var base = _ref.base,
       font = _ref.font;
-  var measurement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rem';
+
+  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      _ref2$measurement = _ref2.measurement,
+      measurement = _ref2$measurement === void 0 ? 'rem' : _ref2$measurement,
+      customScale = _ref2.customScale;
 
   if (measurement === 'em') {
     return "".concat(font.scale[scale], "em");
   }
 
   var numerator = base * font.scale[scale];
+  if (customScale) numerator *= font.scale[customScale];
   var denominator = base * font.scale[font.body.scale];
   return measurement === 'px' ? "".concat(numerator, "px") : "".concat((numerator / denominator).toFixed(4), "rem");
 }
@@ -43,21 +48,26 @@ function euiFontSizeFromScale(scale, _ref) {
  *     text stays on the baseline, we pass a multiplier to calculate a line-height.
  * @param scale - The font scale key
  * @param theme - Requires the `base` and `font` keys
- * @param measurement - The returned string measurement
- * *
+ * @param options - Optional parameters - see _FontScaleOptions
+ *
  * @returns string - Calculated line-height value aligned to baseline
  */
 
 
-function euiLineHeightFromBaseline(scale, _ref2) {
-  var base = _ref2.base,
-      font = _ref2.font;
-  var measurement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rem';
+function euiLineHeightFromBaseline(scale, _ref3) {
+  var base = _ref3.base,
+      font = _ref3.font;
+
+  var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      _ref4$measurement = _ref4.measurement,
+      measurement = _ref4$measurement === void 0 ? 'rem' : _ref4$measurement,
+      customScale = _ref4.customScale;
+
   var baseline = font.baseline,
-      body = font.body,
       lineHeightMultiplier = font.lineHeightMultiplier;
   var numerator = base * font.scale[scale];
-  var denominator = base * font.scale[body.scale];
+  if (customScale) numerator *= font.scale[customScale];
+  var denominator = base * font.scale[font.body.scale];
 
   var _lineHeightMultiplier = numerator <= base ? lineHeightMultiplier : lineHeightMultiplier * 0.833;
 

package/lib/global_styling/index.js

@@ -8,6 +8,7 @@ var _global_styles = require("./reset/global_styles");
 
 Object.keys(_global_styles).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _global_styles[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -20,6 +21,7 @@ var _functions = require("./functions");
 
 Object.keys(_functions).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _functions[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -32,6 +34,7 @@ var _variables = require("./variables");
 
 Object.keys(_variables).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _variables[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -44,6 +47,7 @@ var _mixins = require("./mixins");
 
 Object.keys(_mixins).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mixins[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {

package/lib/global_styling/mixins/_color.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiBackgroundColorCSS = exports.useEuiBackgroundColor = exports.euiBackgroundColor = exports.BACKGROUND_COLORS = void 0;
 
+var _react = require("@emotion/react");
+
 var _services = require("../../services");
 
 /*
@@ -17,48 +19,65 @@ var _services = require("../../services");
 var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'primary', 'success', 'warning', 'danger'];
 exports.BACKGROUND_COLORS = BACKGROUND_COLORS;
 
-var euiBackgroundColor = function euiBackgroundColor(color, _ref) {
+var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
   var euiTheme = _ref.euiTheme,
       colorMode = _ref.colorMode;
 
-  function tintOrShade(color) {
-    return colorMode === 'DARK' ? (0, _services.shade)(color, 0.7) : (0, _services.tint)(color, 0.9);
-  }
+  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      method = _ref2.method;
 
-  switch (color) {
-    case 'transparent':
-      return 'transparent';
+  if (color === 'transparent') return 'transparent';
 
-    case 'plain':
-      return euiTheme.colors.emptyShade;
+  if (method === 'transparent') {
+    if (color === 'plain') {
+      return (0, _services.transparentize)(euiTheme.colors.ghost, 0.2);
+    } else if (color === 'subdued') {
+      return (0, _services.transparentize)(euiTheme.colors.lightShade, 0.2);
+    } else {
+      return (0, _services.transparentize)(euiTheme.colors[color], 0.1);
+    }
+  } else {
+    var tintOrShade = function tintOrShade(color) {
+      return colorMode === 'DARK' ? (0, _services.shade)(color, 0.8) : (0, _services.tint)(color, 0.9);
+    };
 
-    case 'subdued':
-      return euiTheme.colors.body;
+    switch (color) {
+      case 'plain':
+        return euiTheme.colors.emptyShade;
 
-    default:
-      return tintOrShade(euiTheme.colors[color]);
+      case 'subdued':
+        return euiTheme.colors.body;
+
+      default:
+        return tintOrShade(euiTheme.colors[color]);
+    }
   }
 };
 
 exports.euiBackgroundColor = euiBackgroundColor;
 
 var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      method = _ref3.method;
+
   var euiTheme = (0, _services.useEuiTheme)();
-  return euiBackgroundColor(color, euiTheme);
+  return euiBackgroundColor(euiTheme, color, {
+    method: method
+  });
 };
 
 exports.useEuiBackgroundColor = useEuiBackgroundColor;
 
 var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
   return {
-    transparent: "\n      background-color: ".concat(useEuiBackgroundColor('transparent'), ";\n    "),
-    plain: "\n      background-color: ".concat(useEuiBackgroundColor('plain'), ";\n    "),
-    subdued: "\n      background-color: ".concat(useEuiBackgroundColor('subdued'), ";\n    "),
-    accent: "\n      background-color: ".concat(useEuiBackgroundColor('accent'), ";\n    "),
-    primary: "\n      background-color: ".concat(useEuiBackgroundColor('primary'), ";\n    "),
-    success: "\n      background-color: ".concat(useEuiBackgroundColor('success'), ";\n    "),
-    warning: "\n      background-color: ".concat(useEuiBackgroundColor('warning'), ";\n    "),
-    danger: "\n      background-color: ".concat(useEuiBackgroundColor('danger'), ";\n    ")
+    transparent: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('transparent'), ";;label:transparent;"),
+    plain: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('plain'), ";;label:plain;"),
+    subdued: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('subdued'), ";;label:subdued;"),
+    accent: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('accent'), ";;label:accent;"),
+    primary: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('primary'), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('success'), ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('warning'), ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('danger'), ";;label:danger;")
   };
 };
 

package/lib/global_styling/mixins/_helpers.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiOverflowScroll = exports.euiOverflowScroll = exports.useEuiXScrollWithShadows = exports.euiXScrollWithShadows = exports.useEuiXScroll = exports.euiXScroll = exports.useEuiYScrollWithShadows = exports.euiYScrollWithShadows = exports.useEuiYScroll = exports.euiYScroll = exports.useEuiScrollBar = exports.euiScrollBarStyles = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = void 0;
 
 var _theme = require("../../services/theme");
 
 var _color = require("../../services/color");
 
-var _utils = require("../utils");
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,8 +17,9 @@ var _utils = require("../utils");
  * Side Public License, v 1.
  */
 var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
-  var colors = _ref.colors,
-      size = _ref.size;
+  var _ref$euiTheme = _ref.euiTheme,
+      colors = _ref$euiTheme.colors,
+      size = _ref$euiTheme.size;
 
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _thumbColor = _ref2.thumbColor,
@@ -43,16 +42,21 @@ var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
 };
 
 exports.euiScrollBarStyles = euiScrollBarStyles;
-var useEuiScrollBar = (0, _utils.createStyleHookFromMixin)(euiScrollBarStyles);
+
+var useEuiScrollBar = function useEuiScrollBar(options) {
+  var euiTheme = (0, _theme.useEuiTheme)();
+  return euiScrollBarStyles(euiTheme, options);
+};
 /**
  * *INTERNAL*
  * Overflow shadow masks for use in YScroll and XScroll helpers
  */
 
+
 exports.useEuiScrollBar = useEuiScrollBar;
 
 var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
-  var size = _ref3.size;
+  var size = _ref3.euiTheme.size;
 
   var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _direction = _ref4.direction,
@@ -94,7 +98,12 @@ var euiYScroll = function euiYScroll(euiTheme) {
 };
 
 exports.euiYScroll = euiYScroll;
-var useEuiYScroll = (0, _utils.createStyleHookFromMixin)(euiYScroll);
+
+var useEuiYScroll = function useEuiYScroll() {
+  var euiTheme = (0, _theme.useEuiTheme)();
+  return euiYScroll(euiTheme);
+};
+
 exports.useEuiYScroll = useEuiYScroll;
 
 var euiYScrollWithShadows = function euiYScrollWithShadows(euiTheme) {
@@ -104,7 +113,12 @@ var euiYScrollWithShadows = function euiYScrollWithShadows(euiTheme) {
 };
 
 exports.euiYScrollWithShadows = euiYScrollWithShadows;
-var useEuiYScrollWithShadows = (0, _utils.createStyleHookFromMixin)(euiYScrollWithShadows);
+
+var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
+  var euiTheme = (0, _theme.useEuiTheme)();
+  return euiYScrollWithShadows(euiTheme);
+};
+
 exports.useEuiYScrollWithShadows = useEuiYScrollWithShadows;
 
 var euiXScroll = function euiXScroll(euiTheme) {
@@ -112,7 +126,12 @@ var euiXScroll = function euiXScroll(euiTheme) {
 };
 
 exports.euiXScroll = euiXScroll;
-var useEuiXScroll = (0, _utils.createStyleHookFromMixin)(euiXScroll);
+
+var useEuiXScroll = function useEuiXScroll() {
+  var euiTheme = (0, _theme.useEuiTheme)();
+  return euiXScroll(euiTheme);
+};
+
 exports.useEuiXScroll = useEuiXScroll;
 
 var euiXScrollWithShadows = function euiXScrollWithShadows(euiTheme) {
@@ -122,7 +141,12 @@ var euiXScrollWithShadows = function euiXScrollWithShadows(euiTheme) {
 };
 
 exports.euiXScrollWithShadows = euiXScrollWithShadows;
-var useEuiXScrollWithShadows = (0, _utils.createStyleHookFromMixin)(euiXScrollWithShadows);
+
+var useEuiXScrollWithShadows = function useEuiXScrollWithShadows() {
+  var euiTheme = (0, _theme.useEuiTheme)();
+  return euiXScrollWithShadows(euiTheme);
+};
+
 exports.useEuiXScrollWithShadows = useEuiXScrollWithShadows;
 
 var euiOverflowScroll = function euiOverflowScroll(euiTheme) {
@@ -148,10 +172,7 @@ exports.euiOverflowScroll = euiOverflowScroll;
 
 var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
   var mask = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-  var _useEuiTheme = (0, _theme.useEuiTheme)(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = (0, _theme.useEuiTheme)();
   return euiOverflowScroll(euiTheme, {
     direction: direction,
     mask: mask

package/lib/global_styling/mixins/_padding.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiPaddingCSS = exports.useEuiPaddingSize = exports.euiPaddingSize = exports.PADDING_SIZES = void 0;
+exports.useEuiPaddingSize = exports.useEuiPaddingCSS = exports.euiPaddingSize = exports.PADDING_SIZES = void 0;
+
+var _react = require("@emotion/react");
 
 var _theme = require("../../services/theme");
 
@@ -19,7 +21,7 @@ var _functions = require("../functions");
 var PADDING_SIZES = ['none', 'xs', 's', 'm', 'l', 'xl'];
 exports.PADDING_SIZES = PADDING_SIZES;
 
-var euiPaddingSize = function euiPaddingSize(size, _ref) {
+var euiPaddingSize = function euiPaddingSize(_ref, size) {
   var euiTheme = _ref.euiTheme;
 
   switch (size) {
@@ -38,7 +40,7 @@ exports.euiPaddingSize = euiPaddingSize;
 
 var useEuiPaddingSize = function useEuiPaddingSize(size) {
   var euiTheme = (0, _theme.useEuiTheme)();
-  return euiPaddingSize(size, euiTheme);
+  return euiPaddingSize(euiTheme, size);
 };
 
 exports.useEuiPaddingSize = useEuiPaddingSize;
@@ -47,11 +49,11 @@ var useEuiPaddingCSS = function useEuiPaddingCSS(side) {
   var property = side ? "padding-".concat(_functions.logicalSide[side]) : 'padding';
   return {
     none: null,
-    xs: "\n      ".concat(property, ": ").concat(useEuiPaddingSize('xs'), ";\n    "),
-    s: "\n      ".concat(property, ": ").concat(useEuiPaddingSize('s'), ";\n    "),
-    m: "\n      ".concat(property, ": ").concat(useEuiPaddingSize('m'), ";\n    "),
-    l: "\n      ".concat(property, ": ").concat(useEuiPaddingSize('l'), ";\n    "),
-    xl: "\n      ".concat(property, ": ").concat(useEuiPaddingSize('xl'), ";\n    ")
+    xs: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('xs'), ";;label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('s'), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('m'), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('l'), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('xl'), ";;label:xl;")
   };
 };
 

package/lib/global_styling/mixins/_states.js

@@ -25,10 +25,10 @@ var _services = require("../../services");
  */
 var euiFocusRing = function euiFocusRing(euiTheme) {
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
-  var color = arguments.length > 2 ? arguments[2] : undefined;
+  var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
   var outlineWidth = euiTheme.focus.width;
-  var outlineColor = color || euiTheme.focus.color;
+  var outlineColor = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.focus.color;
   var outlineOffset = offset;
 
   if (offset === 'inset') {
@@ -46,8 +46,7 @@ var euiFocusRing = function euiFocusRing(euiTheme) {
 
 
   return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
-}; // Hook version
-
+};
 
 exports.euiFocusRing = euiFocusRing;
 
@@ -55,7 +54,9 @@ var useEuiFocusRing = function useEuiFocusRing(offset, color) {
   var _useEuiTheme = (0, _services.useEuiTheme)(),
       euiTheme = _useEuiTheme.euiTheme;
 
-  return euiFocusRing(euiTheme, offset, color);
+  return euiFocusRing(euiTheme, offset, {
+    color: color
+  });
 };
 
 exports.useEuiFocusRing = useEuiFocusRing;

package/lib/global_styling/mixins/_typography.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiNumberFormat = exports.euiNumberFormat = exports.euiTextTruncate = exports.euiTextBreakWord = exports.useEuiFontSize = exports.euiFontSize = void 0;
+exports.useEuiNumberFormat = exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
 
 var _typography = require("../functions/typography");
 
@@ -20,25 +20,19 @@ var _hooks = require("../../services/theme/hooks");
 /**
  * Returns font-size and line-height
  */
-var euiFontSize = function euiFontSize(scale, euiTheme) {
-  var measurement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rem';
+var euiFontSize = function euiFontSize(_ref, scale, options) {
+  var euiTheme = _ref.euiTheme;
   return {
-    fontSize: (0, _typography.euiFontSizeFromScale)(scale, euiTheme, measurement),
-    lineHeight: (0, _typography.euiLineHeightFromBaseline)(scale, euiTheme, measurement)
+    fontSize: (0, _typography.euiFontSizeFromScale)(scale, euiTheme, options),
+    lineHeight: (0, _typography.euiLineHeightFromBaseline)(scale, euiTheme, options)
   };
-}; // Hook version
-
+};
 
 exports.euiFontSize = euiFontSize;
 
-var useEuiFontSize = function useEuiFontSize() {
-  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'm';
-  var measurement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rem';
-
-  var _useEuiTheme = (0, _hooks.useEuiTheme)(),
-      euiTheme = _useEuiTheme.euiTheme;
-
-  return euiFontSize(scale, euiTheme, measurement);
+var useEuiFontSize = function useEuiFontSize(scale, options) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiFontSize(euiTheme, scale, options);
 };
 /**
  * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
@@ -69,17 +63,15 @@ var euiTextTruncate = function euiTextTruncate() {
 
 exports.euiTextTruncate = euiTextTruncate;
 
-var euiNumberFormat = function euiNumberFormat(euiTheme) {
+var euiNumberFormat = function euiNumberFormat(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return "\n  font-feature-settings: ".concat(euiTheme.font.featureSettings, ", 'tnum' 1;\n");
-}; // Hook version
-
+};
 
 exports.euiNumberFormat = euiNumberFormat;
 
 var useEuiNumberFormat = function useEuiNumberFormat() {
-  var _useEuiTheme2 = (0, _hooks.useEuiTheme)(),
-      euiTheme = _useEuiTheme2.euiTheme;
-
+  var euiTheme = (0, _hooks.useEuiTheme)();
   return euiNumberFormat(euiTheme);
 };
 

package/lib/global_styling/mixins/index.js

@@ -8,6 +8,7 @@ var _color = require("./_color");
 
 Object.keys(_color).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _color[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -20,6 +21,7 @@ var _helpers = require("./_helpers");
 
 Object.keys(_helpers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpers[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -32,6 +34,7 @@ var _padding = require("./_padding");
 
 Object.keys(_padding).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _padding[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -44,6 +47,7 @@ var _states = require("./_states");
 
 Object.keys(_states).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _states[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -56,6 +60,7 @@ var _typography = require("./_typography");
 
 Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _typography[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {