@elastic/eui 95.7.0 → 95.8.0-backport.0

package/lib/components/form/range/range_slider.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiRangeSliderThumbStyles = exports.euiRangeSliderStyles = void 0;
 var _react = require("@emotion/react");
 var _services = require("../../../services");
-var _form = require("../form.styles");
 var _range = require("./range.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -20,9 +19,7 @@ var euiRangeSliderStyles = exports.euiRangeSliderStyles = function euiRangeSlide
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
     // Base
-    euiRangeSlider: /*#__PURE__*/(0, _react.css)("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _form.euiCustomControl)(euiThemeContext, {
-      type: 'round'
-    }), "\n        ").concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", (0, _range.euiRangeThumbPerBrowser)('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", (0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocus)(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
+    euiRangeSlider: /*#__PURE__*/(0, _react.css)("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", (0, _range.euiRangeThumbPerBrowser)('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", (0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocus)(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("block-size:", range.thumbHeight, ";;label:hasTicks;"),
     hasRange: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeTrackPerBrowser)("\n        background-color: transparent;\n        border-color: ".concat((0, _services.transparentize)(range.trackBorderColor, 0.6), "\n      ")), ";;label:hasRange;"),
     hasLevels: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbPerBrowser)("background-color: ".concat(range.thumbBackgroundColor)), ";;label:hasLevels;")

package/lib/components/form/range/range_thumb.styles.js

@@ -7,7 +7,6 @@ exports.euiRangeThumbStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
 var _range = require("./range.styles");
-var _form = require("../form.styles");
 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
@@ -27,9 +26,7 @@ var euiRangeThumbStyles = exports.euiRangeThumbStyles = function euiRangeThumbSt
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
     // Base
-    euiRangeThumb: /*#__PURE__*/(0, _react.css)((0, _form.euiCustomControl)(euiThemeContext, {
-      type: 'round'
-    }), " ", (0, _range.euiRangeThumbStyle)(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+    euiRangeThumb: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbStyle)(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
       return x / 2 * -1;
     }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", (0, _range.euiRangeThumbFocus)(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
     hasTicks: _ref

package/lib/components/form/switch/switch.js

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiSwitch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _accessibility = require("../../../services/accessibility");
+var _services = require("../../../services");
 var _icon = require("../../icon");
-var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "css", "showLabel", "type", "labelProps"];
+var _switch = require("./switch.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["label", "id", "checked", "disabled", "compressed", "mini", "onChange", "className", "showLabel", "type", "labelProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,6 +24,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
 var EuiSwitch = exports.EuiSwitch = function EuiSwitch(_ref) {
@@ -31,19 +38,19 @@ var EuiSwitch = exports.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,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     labelProps = _ref.labelProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var switchId = (0, _accessibility.useGeneratedHtmlId)({
+  var switchId = (0, _services.useGeneratedHtmlId)({
     conditionalId: id
   });
-  var labelId = (0, _accessibility.useGeneratedHtmlId)({
+  var labelId = (0, _services.useGeneratedHtmlId)({
     conditionalId: labelProps === null || labelProps === void 0 ? void 0 : labelProps.id
   });
   var onClick = (0, _react.useCallback)(function (e) {
@@ -54,23 +61,26 @@ var EuiSwitch = exports.EuiSwitch = function EuiSwitch(_ref) {
     event.target.checked = !checked;
     onChange(event);
   }, [checked, disabled, onChange]);
-  var classes = (0, _classnames.default)('euiSwitch', {
-    'euiSwitch--compressed': compressed
-  }, className);
+  var classes = (0, _classnames.default)('euiSwitch', className);
   var labelClasses = (0, _classnames.default)('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__*/(0, _react2.css)(";label:euiSwitch;")
-  }; // TODO: Emotion conversion
-  var cssStyles = [styles.euiSwitch, customCss];
+  var size = mini ? 'mini' : compressed ? 'compressed' : 'uncompressed';
+  var styles = (0, _services.useEuiMemoizedStyles)(_switch.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 (0, _react2.jsx)("div", {
     css: cssStyles,
     className: classes
   }, (0, _react2.jsx)("button", _extends({
     id: switchId,
     "aria-checked": checked || false,
+    css: buttonStyles,
     className: "euiSwitch__button",
     role: "switch",
     type: type,
@@ -79,24 +89,26 @@ var EuiSwitch = exports.EuiSwitch = function EuiSwitch(_ref) {
     "aria-label": showLabel ? undefined : label,
     "aria-labelledby": showLabel ? labelId : undefined
   }, rest), (0, _react2.jsx)("span", {
+    css: bodyStyles,
     className: "euiSwitch__body"
-  }, (0, _react2.jsx)("span", {
-    className: "euiSwitch__thumb"
-  }), (0, _react2.jsx)("span", {
-    className: "euiSwitch__track"
-  }, !compressed && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, {
-    type: "cross",
-    size: "m",
-    className: "euiSwitch__icon"
-  }), (0, _react2.jsx)(_icon.EuiIcon, {
+  }, !(compressed || mini) && (0, _react2.jsx)("span", {
+    css: iconsStyles,
+    className: "euiSwitch__icons"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
     type: "check",
-    size: "m",
-    className: "euiSwitch__icon euiSwitch__icon--checked"
-  }))))), showLabel &&
+    size: "m"
+  }), (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "cross",
+    size: "m"
+  }))), (0, _react2.jsx)("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
   (0, _react2.jsx)("span", _extends({}, labelProps, {
+    css: labelStyles,
     className: labelClasses,
     id: labelId,
     onClick: onClick
@@ -118,6 +130,9 @@ EuiSwitch.propTypes = {
   checked: _propTypes.default.bool.isRequired,
   onChange: _propTypes.default.func.isRequired,
   disabled: _propTypes.default.bool,
+  /**
+       * Compressed switches are smaller and contain no icon signifiers
+       */
   compressed: _propTypes.default.bool,
   /**
        * Object of props passed to the label's `<span />`
@@ -127,5 +142,10 @@ EuiSwitch.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
-  })
+  }),
+  /**
+       * Mini styling is similar to compressed, but even smaller.
+       * It's undocumented because it has very specific uses.
+       */
+  mini: _propTypes.default.bool
 };

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

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSwitchStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../../services");
+var _global_styling = require("../../../global_styling");
+var _form = require("../form.styles");
+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.
+ */
+var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formVars = (0, _form.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: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+        return x * 1.25;
+      }),
+      width: (0, _global_styling.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: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+        return x * 1.75;
+      }),
+      thumbScales: {
+        default: 0.9,
+        hover: 0.95,
+        active: 0.8
+      }
+    },
+    get mini() {
+      return {
+        height: (0, _global_styling.mathWithUnits)(this.uncompressed.height, function (x) {
+          return x / 2;
+        }),
+        width: (0, _global_styling.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__
+};
+var euiSwitchStyles = exports.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__*/(0, _react.css)("flex-shrink:0;line-height:0;position:relative;cursor:inherit;", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";;label:euiSwitch__button;"),
+    // Skip css`` to avoid generating an Emotion className
+    uncompressed: "\n      ".concat((0, _global_styling.logicalSizeCSS)(uncompressed.width, uncompressed.height), "\n      border-radius: ").concat(uncompressed.height, ";\n    "),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(compressed.width, compressed.height), " border-radius:", compressed.height, ";;label:compressed;"),
+    mini: /*#__PURE__*/(0, _react.css)((0, _global_styling.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__*/(0, _react.css)("label:disabled;background-color:", colorMode === 'DARK' ? colors.disabled : (0, _services.tint)(colors.disabled, tintAmount), ";");
+  };
+  return {
+    euiSwitch__body: _ref,
+    on: /*#__PURE__*/(0, _react.css)("background-color:", colors.on, ";;label:on;"),
+    off: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', '-50%'), " ", (0, _global_styling.logicalCSS)('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " ", _global_styling.euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
+    on: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', '-25%'), ";;label:on;"),
+    off: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', '-75%'), ";;label:off;"),
+    enabled: /*#__PURE__*/(0, _react.css)("color:", colors.thumb, ";;label:enabled;"),
+    disabled: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " aspect-ratio:1;", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " border-radius:50%;pointer-events:none;", _global_styling.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__*/(0, _react.css)((0, _global_styling.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 = (0, _global_styling.mathWithUnits)([bodyWidth, thumbWidth], function (x, y) {
+          return x - y;
+        });
+        return /*#__PURE__*/(0, _react.css)("label:on;", (0, _global_styling.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__*/(0, _react.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', label.gap), ";;label:euiSwitch__label;"),
+    // Skip css`` to avoid generating an Emotion className
+    uncompressed: "\n      font-size: ".concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n      line-height: ").concat(uncompressed.height, ";\n    "),
+    compressed: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";line-height:", compressed.height, ";;label:compressed;"),
+    mini: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", mini.height, ";;label:mini;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", label.disabled, ";;label:disabled;")
+  };
+};

package/lib/components/form/text_area/text_area.js

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

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

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

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

@@ -1,6 +1,5 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("../../button");
 var _react2 = require("@emotion/react");
-var _excluded = ["isActive", "className"];
+var _excluded = ["isActive", "className", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,26 +18,23 @@ var _excluded = ["isActive", "className"];
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
+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; }
 var EuiHeaderLink = exports.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 = (0, _classnames.default)('euiHeaderLink', {
     'euiHeaderLink-isActive': isActive
   }, className);
-  var props = _objectSpread(_objectSpread({
-    color: isActive ? 'primary' : 'text'
-  }, rest), {}, {
-    className: classes
-  });
-  return (0, _react2.jsx)(_button.EuiButtonEmpty, props);
+  return (0, _react2.jsx)(_button.EuiButtonEmpty, _extends({
+    className: classes,
+    color: isActive ? 'primary' : 'text',
+    size: size
+  }, rest));
 };
 EuiHeaderLink.propTypes = {
   href: _propTypes.default.string,

package/lib/components/header/header_links/header_links.js

@@ -108,7 +108,7 @@ var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,
-      panelPaddingSize: "none",
+      panelPaddingSize: "s",
       repositionOnScroll: true
     }, popoverProps), (0, _react2.jsx)("div", {
       className: "euiHeaderLinks__mobileList",

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

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

package/lib/services/emotion/clone_element.js

@@ -23,14 +23,16 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * See https://github.com/emotion-js/emotion/issues/1404
  */
 var cloneElementWithCss = exports.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 (0, _react.jsx)(clonedElement, clonedProps);
 };

package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -238,13 +238,14 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
         var styles = stylesMemoizer(euiComboBoxInputStyles);
         var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined, isInGroup && styles.inGroup]);
-        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect, isInGroup && !append && styles.formLayout.prependOnly, isInGroup && !prepend && styles.formLayout.appendOnly];
+        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
         return ___EmotionJSX(EuiFormControlLayout, _extends({
           icon: icon
         }, clickProps, {
           inputId: id,
           isLoading: isLoading,
           isInvalid: isInvalid,
+          isDisabled: isDisabled,
           compressed: compressed,
           fullWidth: fullWidth,
           prepend: prepend,

package/optimize/es/components/combo_box/combo_box_input/combo_box_input.styles.js

@@ -50,11 +50,7 @@ export var euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeCont
     formLayout: {
       euiComboBox__formControlLayout: /*#__PURE__*/css(";label:euiComboBox__formControlLayout;"),
       // Allow the form control to expand to any height to accommodate multiple rows of pills
-      // TODO: Remove && specificity override once EuiFormControlLayout is on Emotion
-      multiSelect: /*#__PURE__*/css("&&{", logicalCSS('height', 'auto'), ";};label:multiSelect;"),
-      // Fix overflowing input wrapper background
-      prependOnly: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ";};label:prependOnly;"),
-      appendOnly: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), ";};label:appendOnly;")
+      multiSelect: /*#__PURE__*/css(logicalCSS('height', 'auto'), ";;label:multiSelect;")
     }
   };
 };

package/optimize/es/components/datagrid/controls/column_selector.js

@@ -151,8 +151,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
           label: displayValues[id] || id,
           showLabel: false,
           checked: visibleColumnIds.has(id),
-          compressed: true,
-          className: "euiSwitch--mini",
+          mini: true,
           onChange: function onChange(event) {
             var checked = event.target.checked;
             var nextVisibleColumns = sortedColumns.filter(function (columnId) {

package/optimize/es/components/datagrid/data_grid.a11y.js

@@ -174,7 +174,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations when the columns reorder searchbox returns multiple results', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.get('input[data-test-subj="dataGridColumnSelectorSearch"]').type('a');
-      cy.get('div.euiSwitch--compressed').should(function ($s) {
+      cy.get('.euiSwitch').should(function ($s) {
         expect($s).to.have.length(5);
       });
       cy.checkAxe();
@@ -182,7 +182,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations when the columns reorder searchbox returns 1 result', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.get('input[data-test-subj="dataGridColumnSelectorSearch"]').type('favorite');
-      cy.get('div.euiSwitch--compressed').should(function ($s) {
+      cy.get('.euiSwitch').should(function ($s) {
         expect($s).to.have.length(1);
       });
       cy.checkAxe();