@elastic/eui 95.7.0 → 95.8.0-backport.0

package/es/components/form/switch/switch.js

@@ -1,5 +1,11 @@
-var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "css", "showLabel", "type", "labelProps"];
+var _excluded = ["label", "id", "checked", "disabled", "compressed", "mini", "onChange", "className", "showLabel", "type", "labelProps"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
@@ -12,10 +18,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { useCallback } from 'react';
 import PropTypes from "prop-types";
-import { css } from '@emotion/react';
 import classNames from 'classnames';
-import { useGeneratedHtmlId } from '../../../services/accessibility';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
+import { euiSwitchStyles } from './switch.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiSwitch = function EuiSwitch(_ref) {
   var label = _ref.label,
@@ -23,9 +29,9 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     checked = _ref.checked,
     disabled = _ref.disabled,
     compressed = _ref.compressed,
+    mini = _ref.mini,
     onChange = _ref.onChange,
     className = _ref.className,
-    customCss = _ref.css,
     _ref$showLabel = _ref.showLabel,
     showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
     _ref$type = _ref.type,
@@ -46,23 +52,26 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     event.target.checked = !checked;
     onChange(event);
   }, [checked, disabled, onChange]);
-  var classes = classNames('euiSwitch', {
-    'euiSwitch--compressed': compressed
-  }, className);
+  var classes = classNames('euiSwitch', className);
   var labelClasses = classNames('euiSwitch__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
   if (showLabel === false && typeof label !== 'string') {
     console.warn('EuiSwitch `label` must be a string when `showLabel` is false.');
   }
-  var styles = {
-    euiSwitch: /*#__PURE__*/css(";label:euiSwitch;")
-  }; // TODO: Emotion conversion
-  var cssStyles = [styles.euiSwitch, customCss];
+  var size = mini ? 'mini' : compressed ? 'compressed' : 'uncompressed';
+  var styles = useEuiMemoizedStyles(euiSwitchStyles);
+  var cssStyles = [styles.euiSwitch, disabled ? styles.disabled : styles.enabled];
+  var buttonStyles = [styles.button.euiSwitch__button, styles.button[size]];
+  var bodyStyles = [styles.body.euiSwitch__body, disabled ? styles.body.disabled[size] : checked ? styles.body.on : styles.body.off];
+  var iconsStyles = [styles.icons.euiSwitch__icons, checked ? styles.icons.on : styles.icons.off, disabled ? styles.icons.disabled : styles.icons.enabled];
+  var thumbStyles = [styles.thumb.euiSwitch__thumb, checked ? styles.thumb.on[size] : styles.thumb.off].concat(_toConsumableArray(disabled ? [styles.thumb.disabled.disabled, styles.thumb.disabled[size]] : [styles.thumb.enabled.enabled, styles.thumb.enabled[size]]));
+  var labelStyles = [styles.label.euiSwitch__label, styles.label[size], disabled && styles.label.disabled, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
   return ___EmotionJSX("div", {
     css: cssStyles,
     className: classes
   }, ___EmotionJSX("button", _extends({
     id: switchId,
     "aria-checked": checked || false,
+    css: buttonStyles,
     className: "euiSwitch__button",
     role: "switch",
     type: type,
@@ -71,24 +80,26 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     "aria-label": showLabel ? undefined : label,
     "aria-labelledby": showLabel ? labelId : undefined
   }, rest), ___EmotionJSX("span", {
+    css: bodyStyles,
     className: "euiSwitch__body"
-  }, ___EmotionJSX("span", {
-    className: "euiSwitch__thumb"
-  }), ___EmotionJSX("span", {
-    className: "euiSwitch__track"
-  }, !compressed && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, {
-    type: "cross",
-    size: "m",
-    className: "euiSwitch__icon"
-  }), ___EmotionJSX(EuiIcon, {
+  }, !(compressed || mini) && ___EmotionJSX("span", {
+    css: iconsStyles,
+    className: "euiSwitch__icons"
+  }, ___EmotionJSX(EuiIcon, {
     type: "check",
-    size: "m",
-    className: "euiSwitch__icon euiSwitch__icon--checked"
-  }))))), showLabel &&
+    size: "m"
+  }), ___EmotionJSX(EuiIcon, {
+    type: "cross",
+    size: "m"
+  }))), ___EmotionJSX("span", {
+    css: thumbStyles,
+    className: "euiSwitch__thumb"
+  })), showLabel &&
   // <button> + <label> has poor screen reader support.
   // Click handler added to simulate natural, secondary <label> interactivity.
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   ___EmotionJSX("span", _extends({}, labelProps, {
+    css: labelStyles,
     className: labelClasses,
     id: labelId,
     onClick: onClick
@@ -110,6 +121,9 @@ EuiSwitch.propTypes = {
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
+  /**
+       * Compressed switches are smaller and contain no icon signifiers
+       */
   compressed: PropTypes.bool,
   /**
        * Object of props passed to the label's `<span />`
@@ -119,5 +133,10 @@ EuiSwitch.propTypes = {
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
-  })
+  }),
+  /**
+       * Mini styling is similar to compressed, but even smaller.
+       * It's undocumented because it has very specific uses.
+       */
+  mini: PropTypes.bool
 };

package/es/components/form/switch/switch.styles.js

@@ -0,0 +1,226 @@
+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
+ * 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 { tint } from '../../../services';
+import { euiCanAnimate, euiFocusRing, euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormCustomControlVariables } from '../form.styles';
+var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formVars = euiFormCustomControlVariables(euiThemeContext);
+  var colors = {
+    on: formVars.colors.selected,
+    off: formVars.colors.unselectedBorder,
+    disabled: formVars.colors.disabled,
+    thumb: formVars.colors.selectedIcon,
+    thumbBorder: formVars.colors.unselectedBorder,
+    thumbBorderDisabled: formVars.colors.unselectedBorder
+  };
+  var sizes = {
+    uncompressed: {
+      height: mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 1.25;
+      }),
+      width: mathWithUnits([euiTheme.size.xxl, euiTheme.size.xs], function (x, y) {
+        return x + y;
+      }),
+      thumbScales: {
+        default: 1,
+        hover: 1.05,
+        active: 0.9
+      }
+    },
+    compressed: {
+      height: euiTheme.size.base,
+      width: mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 1.75;
+      }),
+      thumbScales: {
+        default: 0.9,
+        hover: 0.95,
+        active: 0.8
+      }
+    },
+    get mini() {
+      return {
+        height: mathWithUnits(this.uncompressed.height, function (x) {
+          return x / 2;
+        }),
+        width: mathWithUnits(this.uncompressed.width, function (x) {
+          return x / 2;
+        }),
+        thumbScales: {
+          default: 0.8,
+          hover: undefined,
+          active: undefined
+        }
+      };
+    }
+  };
+  var animation = {
+    speed: euiTheme.animation.normal,
+    easing: euiTheme.animation.bounce
+  };
+  var label = {
+    disabled: formVars.colors.disabledLabel,
+    gap: formVars.sizes.labelGap
+  };
+  return {
+    sizes: sizes,
+    colors: colors,
+    animation: animation,
+    label: label
+  };
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;"
+} : {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "eg68pp-euiSwitch",
+  styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;"
+} : {
+  name: "eg68pp-euiSwitch",
+  styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiSwitchStyles = function euiSwitchStyles(euiThemeContext) {
+  var switchVars = euiSwitchVars(euiThemeContext);
+  return {
+    euiSwitch: _ref3,
+    // Skip css`` to avoid generating an extra Emotion className
+    enabled: "\n      cursor: pointer;\n    ",
+    disabled: _ref2,
+    button: buttonStyles(euiThemeContext, switchVars),
+    // The track body must be separate from the button wrapper, because the
+    // icons have their overflow hidden outside the button, but the thumb doesn't
+    body: bodyStyles(euiThemeContext, switchVars),
+    icons: iconStyles(euiThemeContext, switchVars),
+    thumb: thumbStyles(euiThemeContext, switchVars),
+    label: labelStyles(euiThemeContext, switchVars)
+  };
+};
+var buttonStyles = function buttonStyles(euiThemeContext, switchVars) {
+  var _switchVars$sizes = switchVars.sizes,
+    uncompressed = _switchVars$sizes.uncompressed,
+    compressed = _switchVars$sizes.compressed,
+    mini = _switchVars$sizes.mini;
+  return {
+    euiSwitch__button: /*#__PURE__*/css("flex-shrink:0;line-height:0;position:relative;cursor:inherit;", euiFocusRing(euiThemeContext, 'outset'), ";;label:euiSwitch__button;"),
+    // Skip css`` to avoid generating an Emotion className
+    uncompressed: "\n      ".concat(logicalSizeCSS(uncompressed.width, uncompressed.height), "\n      border-radius: ").concat(uncompressed.height, ";\n    "),
+    compressed: /*#__PURE__*/css(logicalSizeCSS(compressed.width, compressed.height), " border-radius:", compressed.height, ";;label:compressed;"),
+    mini: /*#__PURE__*/css(logicalSizeCSS(mini.width, mini.height), " border-radius:", mini.height, ";;label:mini;")
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "19cwu6v-euiSwitch__body",
+  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;"
+} : {
+  name: "19cwu6v-euiSwitch__body",
+  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var bodyStyles = function bodyStyles(_ref4, _ref5) {
+  var colorMode = _ref4.colorMode;
+  var colors = _ref5.colors;
+  // This is probably very extra, but the visual weight of the default
+  // disabled custom control feels different in light mode depending
+  // on the size of the switch, so I'm tinting it based on that.
+  // Gotta justify my stupidly expensive art degree!
+  var _calculateDisabledColor = function _calculateDisabledColor(tintAmount) {
+    return /*#__PURE__*/css("label:disabled;background-color:", colorMode === 'DARK' ? colors.disabled : tint(colors.disabled, tintAmount), ";");
+  };
+  return {
+    euiSwitch__body: _ref,
+    on: /*#__PURE__*/css("background-color:", colors.on, ";;label:on;"),
+    off: /*#__PURE__*/css("background-color:", colors.off, ";;label:off;"),
+    disabled: {
+      uncompressed: _calculateDisabledColor(0.5),
+      compressed: _calculateDisabledColor(0.25),
+      mini: _calculateDisabledColor(0)
+    }
+  };
+};
+var iconStyles = function iconStyles(_ref6, _ref7) {
+  var euiTheme = _ref6.euiTheme;
+  var colors = _ref7.colors,
+    animation = _ref7.animation;
+  return {
+    euiSwitch__icons: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', '-50%'), " ", logicalCSS('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", logicalCSS('padding-horizontal', euiTheme.size.xs), " ", euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
+    on: /*#__PURE__*/css(logicalCSS('left', '-25%'), ";;label:on;"),
+    off: /*#__PURE__*/css(logicalCSS('left', '-75%'), ";;label:off;"),
+    enabled: /*#__PURE__*/css("color:", colors.thumb, ";;label:enabled;"),
+    disabled: /*#__PURE__*/css("color:", colors.thumbBorderDisabled, ";;label:disabled;")
+  };
+};
+var thumbStyles = function thumbStyles(_ref8, switchVars) {
+  var euiTheme = _ref8.euiTheme;
+  var sizes = switchVars.sizes,
+    colors = switchVars.colors,
+    animation = switchVars.animation;
+  var uncompressed = sizes.uncompressed,
+    compressed = sizes.compressed,
+    mini = sizes.mini;
+  var _calculateScale = function _calculateScale(size, hoverActiveStates) {
+    var baseScale = "transform: scale(".concat(sizes[size].thumbScales.default, ");");
+    var states = hoverActiveStates ? "\n      .euiSwitch:hover & {\n        transform: scale(".concat(sizes[size].thumbScales.hover, ");\n      }\n      .euiSwitch:active & {\n        transform: scale(").concat(sizes[size].thumbScales.active, ");\n      }") : '';
+    return "".concat(baseScale).concat(states);
+  };
+  return {
+    euiSwitch__thumb: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " aspect-ratio:1;", logicalCSS('width', 'fit-content'), " ", logicalCSS('height', '100%'), " border-radius:50%;pointer-events:none;", euiCanAnimate, "{transition-property:inset-inline-start,transform,background-color,border-color;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__thumb;"),
+    off: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:off;"),
+    get on() {
+      // right: 0 works but doesn't transition/animate, so we need to
+      // manually calculate the left position per switch size
+      var _calculateLeft = function _calculateLeft(bodyWidth, thumbWidth) {
+        var leftPosition = mathWithUnits([bodyWidth, thumbWidth], function (x, y) {
+          return x - y;
+        });
+        return /*#__PURE__*/css("label:on;", logicalCSS('left', leftPosition), ";");
+      };
+      return {
+        uncompressed: _calculateLeft(uncompressed.width, uncompressed.height),
+        compressed: _calculateLeft(compressed.width, compressed.height),
+        mini: _calculateLeft(mini.width, mini.height)
+      };
+    },
+    enabled: {
+      enabled: "\n        background-color: ".concat(colors.thumb, ";\n        border: ").concat(euiTheme.border.width.thin, " solid ").concat(colors.thumbBorder, ";\n      "),
+      uncompressed: _calculateScale('uncompressed', true),
+      compressed: _calculateScale('compressed', true),
+      mini: _calculateScale('mini', false)
+    },
+    disabled: {
+      disabled: /*#__PURE__*/css("background-color:transparent;border:", euiTheme.border.width.thin, " solid ", colors.thumbBorderDisabled, ";;label:disabled;"),
+      uncompressed: _calculateScale('uncompressed', false),
+      compressed: _calculateScale('compressed', false),
+      mini: _calculateScale('mini', false)
+    }
+  };
+};
+var labelStyles = function labelStyles(euiThemeContext, _ref9) {
+  var sizes = _ref9.sizes,
+    label = _ref9.label;
+  var uncompressed = sizes.uncompressed,
+    compressed = sizes.compressed,
+    mini = sizes.mini;
+  return {
+    euiSwitch__label: /*#__PURE__*/css(logicalCSS('padding-left', label.gap), ";;label:euiSwitch__label;"),
+    // Skip css`` to avoid generating an Emotion className
+    uncompressed: "\n      font-size: ".concat(euiFontSize(euiThemeContext, 's').fontSize, ";\n      line-height: ").concat(uncompressed.height, ";\n    "),
+    compressed: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";line-height:", compressed.height, ";;label:compressed;"),
+    mini: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", mini.height, ";;label:mini;"),
+    disabled: /*#__PURE__*/css("color:", label.disabled, ";;label:disabled;")
+  };
+};

package/es/components/form/text_area/text_area.js

@@ -72,6 +72,7 @@ export var EuiTextArea = function EuiTextArea(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: rest.disabled,
     clear: clear,
     icon: icon,
     className: "euiFormControlLayout--euiTextArea",

package/es/components/form/text_area/text_area.styles.js

@@ -62,7 +62,7 @@ export var euiTextAreaStyles = function euiTextAreaStyles(euiThemeContext) {
     fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
     // EuiFormControlLayout styles
     formControlLayout: {
-      euiTextArea: /*#__PURE__*/css("&&{", logicalCSS('height', 'auto'), ";}.euiFormControlLayoutIcons{", logicalCSS('top', 'auto'), " ", logicalCSS('bottom', formVars.controlPadding), ";};label:euiTextArea;")
+      euiTextArea: /*#__PURE__*/css(logicalCSS('height', 'auto'), " .euiFormControlLayoutIcons{", logicalCSS('top', 'auto'), " ", logicalCSS('bottom', formVars.controlPadding), ";};label:euiTextArea;")
     }
   };
 };

package/es/components/header/header_links/header_link.js

@@ -1,10 +1,5 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["isActive", "className"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _excluded = ["isActive", "className", "size"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
@@ -23,16 +18,17 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderLink = function EuiHeaderLink(_ref) {
   var isActive = _ref.isActive,
     className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeaderLink', {
     'euiHeaderLink-isActive': isActive
   }, className);
-  var props = _objectSpread(_objectSpread({
-    color: isActive ? 'primary' : 'text'
-  }, rest), {}, {
-    className: classes
-  });
-  return ___EmotionJSX(EuiButtonEmpty, props);
+  return ___EmotionJSX(EuiButtonEmpty, _extends({
+    className: classes,
+    color: isActive ? 'primary' : 'text',
+    size: size
+  }, rest));
 };
 EuiHeaderLink.propTypes = {
   href: PropTypes.string,

package/es/components/header/header_links/header_links.js

@@ -99,7 +99,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,
-      panelPaddingSize: "none",
+      panelPaddingSize: "s",
       repositionOnScroll: true
     }, popoverProps), ___EmotionJSX("div", {
       className: "euiHeaderLinks__mobileList",

package/es/components/header/header_links/header_links.styles.js

@@ -36,6 +36,6 @@ export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
       m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
       l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;")
     },
-    euiHeaderLinks__mobileList: /*#__PURE__*/css(".euiHeaderLink{display:block;", logicalCSS('width', '100%'), " padding:", euiTheme.size.s, ";&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
+    euiHeaderLinks__mobileList: /*#__PURE__*/css(".euiHeaderLink{display:block;", logicalCSS('width', '100%'), "&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
   };
 };

package/es/services/emotion/clone_element.js

@@ -20,14 +20,16 @@ import { jsx } from '@emotion/react';
  * See https://github.com/emotion-js/emotion/issues/1404
  */
 export var cloneElementWithCss = function cloneElementWithCss(element, props) {
+  var cssOrder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'after';
   var clonedElement = element.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ || element.type; // EMOTION_TYPE handles non-React elements (native JSX/HTML nodes)
 
-  var clonedProps = _objectSpread(_objectSpread({
-    key: element.key,
+  var clonedProps = _objectSpread(_objectSpread(_objectSpread({}, element.key ? {
+    key: element.key
+  } : {}), {}, {
     ref: element.ref
   }, element.props), props);
   if (props.css || element.props.css) {
-    clonedProps.css = [element.props.css, props.css];
+    clonedProps.css = cssOrder === 'before' ? [props.css, element.props.css] : [element.props.css, props.css];
   }
   return jsx(clonedElement, clonedProps);
 };