@elastic/eui 102.1.0 → 102.2.0-snapshot.1748601905883

package/lib/components/filter_group/filter_button.js

@@ -14,8 +14,10 @@ var _inner_text = require("../inner_text");
 var _badge = require("../badge");
 var _button_empty = require("../button/button_empty");
 var _filter_button = require("./filter_button.styles");
+var _button_group_button = require("../button/button_group/button_group_button");
+var _button_group_button2 = require("../button/button_group/button_group_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
+var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isToggle", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,12 +26,12 @@ var _excluded = ["children", "className", "iconType", "iconSide", "color", "badg
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; } }
@@ -51,6 +53,7 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     hasActiveFilters = _ref.hasActiveFilters,
     numFilters = _ref.numFilters,
     numActiveFilters = _ref.numActiveFilters,
+    isToggle = _ref.isToggle,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     _ref$type = _ref.type,
@@ -61,18 +64,37 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     textProps = _ref.textProps,
     contentProps = _ref.contentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var id = (0, _services.useGeneratedHtmlId)({
+    prefix: 'filter-button'
+  });
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('buttonVariant');
+
+  // assumption about type of usage based on icon usage
+  // requires manual override to apply correct aria attributes for more custom usages
+  var isCollapsible = !isToggle && iconType === 'arrowDown';
+  // NOTE: in Amsterdam `hasActiveFilters` applies selected styling while `isSelected` does not.
+  // With Borealis this is more granular as EuiFilterButton now supports proper toggle buttons next to regular buttons
+  var isExpanded = isCollapsible && (isSelected !== null && isSelected !== void 0 ? isSelected : hasActiveFilters);
   var styles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonStyles);
-  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var focusColorStyles = (0, _services.useEuiMemoizedStyles)(_button_group_button2._compressedButtonFocusColors);
+  var toggleVariantStyles = isRefreshVariant ? [isToggle && styles.buttonType.toggle, !isToggle && !isDisabled && focusColorStyles[color], !isToggle && styles.buttonType.default] : [isToggle && styles.buttonType.toggle];
+  var cssStyles = [styles.euiFilterButton, !isRefreshVariant && withNext && styles.withNext, hasActiveFilters && styles.hasActiveFilters].concat(toggleVariantStyles);
+  var wrapperStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonWrapperStyles);
+  var wrapperCssStyles = [wrapperStyles.wrapper, isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
   var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonChildStyles),
     contentStyles = _useEuiMemoizedStyles.content,
     textStyles = _useEuiMemoizedStyles.text,
     notificationStyles = _useEuiMemoizedStyles.notification;
+  var wrapperClasses = (0, _classnames.default)('euiFilterButton__wrapper');
   var classes = (0, _classnames.default)('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
-    'euiFilterButton-hasNotification': numFiltersDefined
+    'euiFilterButton-hasNotification': numFiltersDefined,
+    'euiFilterButton-isToggle': isRefreshVariant && isToggle
   }, className);
 
   /**
@@ -87,6 +109,16 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     count: badgeCount
   });
   var badgeStyles = [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled];
+  var badgeContent = (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+    className: "euiFilterButton__notification",
+    css: badgeStyles,
+    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
+    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
+    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+  }, badgeCount);
+  var badgeElement = showBadge && (isRefreshVariant ? (0, _react2.jsx)(_services.EuiThemeProvider, {
+    colorMode: isToggle && isSelected ? 'INVERSE' : colorMode
+  }, badgeContent) : badgeContent);
 
   /**
    * Text
@@ -100,7 +132,17 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, _extends({
+  var textContent = (0, _react2.jsx)("span", _extends({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
+
+  /** Button element */
+  var button = (0, _react2.jsx)(_button_empty.EuiButtonEmpty, _extends({
     className: classes,
     css: cssStyles,
     color: color,
@@ -109,27 +151,42 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     iconType: iconType,
     type: type,
     textProps: false,
+    contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
+      css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
+    }),
+    "aria-expanded": isCollapsible ? isExpanded : undefined
+  }, rest), textContent, badgeElement);
+  var onToggleClick = function onToggleClick(e) {
+    var _rest$onClick;
+    rest === null || rest === void 0 || (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
+  };
+  return (0, _react2.jsx)("div", {
+    className: wrapperClasses,
+    css: wrapperCssStyles
+  }, isToggle && !isCollapsible ? (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, _extends({
+    id: id,
+    label: (0, _react2.jsx)(_react.default.Fragment, null, textContent, badgeElement),
+    className: classes,
+    css: cssStyles,
+    color: color,
+    isSelected: isSelected,
+    size: "compressed",
+    isDisabled: isDisabled,
+    iconSide: iconSide,
+    iconType: iconType,
+    isIconOnly: false,
+    type: type,
+    textProps: false,
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
-  }, rest), (0, _react2.jsx)("span", _extends({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children), showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
-    className: "euiFilterButton__notification",
-    css: badgeStyles,
-    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
-    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
-    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
-  }, badgeCount));
+  }, rest, {
+    onClick: onToggleClick
+  })) : button);
 };
 EuiFilterButton.propTypes = {
   /**
-     * Bolds the button if true
+     * Highlights active filters
      */
   hasActiveFilters: _propTypes.default.bool,
   /**
@@ -143,7 +200,15 @@ EuiFilterButton.propTypes = {
      */
   numActiveFilters: _propTypes.default.number,
   /**
-     * Applies a visual state to the button useful when using with a popover.
+     * Switches between toggle and regular button
+     * @default false
+     */
+  isToggle: _propTypes.default.bool,
+  /**
+     * Applies a visual state to the button.
+     * Automatically applies `aria-pressed` when used with `isToggle={true}`.
+     * Otherwise applies `aria-expanded` when used with `isToggle={false}` and
+     * `iconType="arrowDown"` as trigger button for e.g. a popover.
      */
   isSelected: _propTypes.default.bool,
   /**

package/lib/components/filter_group/filter_button.styles.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
+exports.euiFilterButtonWrapperStyles = exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
+var _supports = require("../../global_styling/functions/supports");
 var _form = require("../form/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
@@ -14,12 +16,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-      return x * 3;
+      return x * (isRefreshVariant ? 2.75 : 3);
     })
   };
 };
@@ -33,9 +36,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlHeight = _euiFormVariables.controlHeight,
     borderColor = _euiFormVariables.borderColor;
+  var selectedSelector = '.euiFilterButton-isSelected';
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
 
   // Pseudo elements create borders without affecting width. We also prefer them
@@ -43,14 +48,44 @@ var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterBu
   var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('right', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('vertical', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n  ");
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n    }\n  ");
+  var buttonStyles = isRefreshVariant ? "\n      ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n\n      &:not(").concat(selectedSelector, ") {\n        &:hover,\n        &:active {\n          .euiFilterButton__notification[class*=\"subdued\"] {\n            background-color: ").concat(euiTheme.components.filterButtonBadgeBackgroundHover, "\n          }\n        }\n      }\n    ") : "\n      ".concat((0, _global_styling.logicalCSS)('height', controlHeight), "\n      border-radius: 0;\n      ").concat(leftBorder, "\n      ").concat(bottomBorder, "\n\n      /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */\n      &:hover:not(:disabled),\n      &:focus:not(:disabled) {\n        /* Remove underline from whole button so notifications don't get the underline */\n        text-decoration: none;\n\n        .euiFilterButton__text {\n          /* And put it only on the actual text part */\n          text-decoration: underline;\n        }\n      }\n    ");
+  var toggleTypeStyles = isRefreshVariant ? "\n      ".concat(euiFilterButtonDisplay(euiThemeContext), ";\n\n      ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n          }\n        ")
+  }), "\n    ") : "\n      font-weight: ".concat(euiTheme.font.weight.medium, ";\n      padding: 0;\n\n      &:is(").concat(selectedSelector, ") {\n        color: ").concat((0, _global_styling.euiButtonEmptyColor)(euiThemeContext, 'text').color, ";\n        background-color: transparent;\n        font-weight: ").concat(euiTheme.font.weight.bold, ";\n      }\n    ");
+  var withNextSelector = isRefreshVariant ? '& + .euiFilterButton__wrapper' : '.euiFilterButton__wrapper:has(&) + .euiFilterButton__wrapper';
+  // handles display of borders between buttons
+  var withNextStyles = isRefreshVariant ? "\n      &::before {\n        border: none;\n      }\n\n      ".concat((0, _supports.cssSupportsHasWithNextSibling)("\n          &:has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;", leftBorder, " ", bottomBorder, "&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
-    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    buttonType: {
+      default: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          border-radius: 0;\n\n          &:focus-visible {\n            z-index: 1;\n            outline-offset: -".concat(euiTheme.border.width.thick, ";\n            border-radius: ").concat(euiTheme.border.radius.small, ";\n            transition: none;\n          }\n        "), ";;label:default;"),
+      toggle: /*#__PURE__*/(0, _react.css)("&:focus-visible{outline-offset:", (0, _global_styling.mathWithUnits)(euiTheme.focus.width, function (x) {
+        return isRefreshVariant ? x / 2 : x * -1;
+      }), ";}", toggleTypeStyles, ";;label:toggle;")
+    },
+    withNext: /*#__PURE__*/(0, _react.css)(withNextSelector, "{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", isRefreshVariant ? euiTheme.font.weight.regular : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+var euiFilterButtonWrapperStyles = exports.euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
+  var _euiFormVariables2 = (0, _form.euiFormVariables)(euiThemeContext),
+    borderColor = _euiFormVariables2.borderColor;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
+
+  // Pseudo elements create borders without affecting width. We also prefer them
+  // over box-shadow for Windows high contrast theme compatibility
+  var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-left', border), "\n\n      pointer-events: none;\n    }\n  ");
+  // Bottom borders are needed for responsive flex-wrap behavior
+  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
+  return {
+    wrapper: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), (0, _supports.cssSupportsHasWithNextSibling)("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -62,24 +97,25 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "nd1u8j-euiFilterButton__notification",
-  styles: "cursor:inherit;label:euiFilterButton__notification;"
+  name: "zxesfz-euiFilterButton__notification",
+  styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;"
 } : {
-  name: "nd1u8j-euiFilterButton__notification",
-  styles: "cursor:inherit;label:euiFilterButton__notification;",
+  name: "zxesfz-euiFilterButton__notification",
+  styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__content;"),
+      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
       hasIcon: /*#__PURE__*/(0, _react.css)("&>.euiIcon:last-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-        return x * 3;
+        return x * (isRefreshVariant ? 2 : 3);
       })), ";;label:hasNotification;")
     },
     notification: {

package/lib/components/filter_group/filter_group.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFilterGroupStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _form = require("../form/form.styles");
@@ -26,20 +27,31 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor,
     controlBorderRadius = _euiFormVariables.controlBorderRadius,
+    controlHeight = _euiFormVariables.controlHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  var borderRadius = isRefreshVariant ? euiTheme.border.radius.small : controlBorderRadius;
+  var borderRadiusCompressed = isRefreshVariant ? euiTheme.border.radius.small : controlCompressedBorderRadius;
+  var borderStyle = isRefreshVariant ? "\n      /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons.\n      Uses ::after to ensure overlap and prevents blocking by setting pointer-events: none */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    ") : "\n      ".concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
+    forced: "border: ".concat(euiTheme.border.thin, ";")
+  }), "\n    ");
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-      forced: "border: ".concat(euiTheme.border.thin, ";")
-    }), ">*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "position: relative;", " display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;", isRefreshVariant && "\n          .euiPopover:focus-within {\n            z-index: 1;\n          }\n            \n          .euiFilterButton__wrapper {\n            flex-grow: 1;\n          }\n        ", ";.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
-    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),
+    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}.euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', isRefreshVariant ? (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+      return x - 2 * y;
+    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:compressed;"),
     /**
      * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
      * A fixed width is required because of the shift in widths that can be caused

package/lib/components/form/range/dual_range.js

@@ -698,7 +698,7 @@ EuiDualRangeClass.propTypes = {
   tickInterval: _propTypes.default.number,
   /**
      * Create colored indicators for certain intervals.
-     * An array of #EuiRangeLevel objects
+     * An array of {@link EuiRangeLevel} objects
      */
   levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

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

@@ -336,7 +336,7 @@ EuiRangeClass.propTypes = {
   tickInterval: _propTypes.default.number,
   /**
      * Create colored indicators for certain intervals.
-     * An array of #EuiRangeLevel objects
+     * An array of {@link EuiRangeLevel} objects
      */
   levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

package/lib/components/form/range/range_track.js

@@ -143,7 +143,7 @@ EuiRangeTrack.propTypes = {
   tickInterval: _propTypes.default.number,
   /**
      * Create colored indicators for certain intervals.
-     * An array of #EuiRangeLevel objects
+     * An array of {@link EuiRangeLevel} objects
      */
   levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

package/lib/components/form/select/select.js

@@ -97,7 +97,7 @@ var EuiSelect = exports.EuiSelect = function EuiSelect(props) {
     value: value,
     onMouseUp: handleMouseUp,
     disabled: disabled
-  }, rest), hasNoInitialSelection && (0, _react2.jsx)("option", {
+  }, rest), hasNoInitialSelection && value === '' && (0, _react2.jsx)("option", {
     value: "",
     disabled: true,
     hidden: true,

package/lib/components/header/header.js

@@ -108,23 +108,23 @@ EuiHeader.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * An array of objects to wrap in a #EuiHeaderSection.
+       * An array of objects to wrap in a {@link EuiHeaderSection}.
        * Each section is spaced using `space-between`.
-       * See #EuiHeaderSections for object details.
+       * See {@link EuiHeaderSections} for object details.
        * This prop disregards the prop `children` if both are passed.
        */
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * An array of items that will be wrapped in a #EuiHeaderSectionItem
+       * An array of items that will be wrapped in a {@link EuiHeaderSectionItem}
        */
     items: _propTypes.default.arrayOf(_propTypes.default.node.isRequired),
     /**
-       * Breadcrumbs in the header cannot be wrapped in a #EuiHeaderSection in order for truncation to work.
+       * Breadcrumbs in the header cannot be wrapped in a {@link EuiHeaderSection} in order for truncation to work.
        * Simply pass the array of EuiBreadcrumb objects
        */
     breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
     /**
-       * Other props to pass to #EuiHeaderBreadcrumbs
+       * Other props to pass to {@link EuiHeaderBreadcrumbs}
        */
     breadcrumbProps: _propTypes.default.any
   }).isRequired),
@@ -196,23 +196,23 @@ EuiFixedHeader.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * An array of objects to wrap in a #EuiHeaderSection.
+       * An array of objects to wrap in a {@link EuiHeaderSection}.
        * Each section is spaced using `space-between`.
-       * See #EuiHeaderSections for object details.
+       * See {@link EuiHeaderSections} for object details.
        * This prop disregards the prop `children` if both are passed.
        */
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * An array of items that will be wrapped in a #EuiHeaderSectionItem
+       * An array of items that will be wrapped in a {@link EuiHeaderSectionItem}
        */
     items: _propTypes.default.arrayOf(_propTypes.default.node.isRequired),
     /**
-       * Breadcrumbs in the header cannot be wrapped in a #EuiHeaderSection in order for truncation to work.
+       * Breadcrumbs in the header cannot be wrapped in a {@link EuiHeaderSection} in order for truncation to work.
        * Simply pass the array of EuiBreadcrumb objects
        */
     breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
     /**
-       * Other props to pass to #EuiHeaderBreadcrumbs
+       * Other props to pass to {@link EuiHeaderBreadcrumbs}
        */
     breadcrumbProps: _propTypes.default.any
   }).isRequired),

package/lib/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -45,7 +45,7 @@ EuiHeaderBreadcrumbs.propTypes = {
   css: _propTypes.default.any,
   /**
      * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller.
-     * Pass a custom #EuiBreadcrumbResponsiveMaxCount object to change the number of breadcrumbs to show at the particular breakpoints.
+     * Pass a custom {@link EuiBreadcrumbResponsiveMaxCount} object to change the number of breadcrumbs to show at the particular breakpoints.
      *
      * Pass `false` to turn this behavior off.
      *
@@ -65,7 +65,7 @@ EuiHeaderBreadcrumbs.propTypes = {
      */
   max: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   /**
-     * The array of individual #EuiBreadcrumb items
+     * The array of individual {@link EuiBreadcrumb} items
      */
   breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
     className: _propTypes.default.string,

package/lib/components/icon/assets/logo_elastic.js

@@ -36,29 +36,35 @@ var EuiIconLogoElastic = function EuiIconLogoElastic(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    fill: "#fff",
-    fillRule: "evenodd",
-    d: "M30.86 13.129A6.333 6.333 0 0 1 32 16.77a6.419 6.419 0 0 1-1.162 3.652 6.382 6.382 0 0 1-3.032 2.331 4.833 4.833 0 0 1-1.672 5.542 4.789 4.789 0 0 1-5.77-.074 9.016 9.016 0 0 1-4.5 3.322 8.982 8.982 0 0 1-5.587.023 9.014 9.014 0 0 1-4.526-3.287 9.067 9.067 0 0 1-1.727-5.333c0-.579.053-1.156.16-1.725A6.305 6.305 0 0 1 1.145 18.9 6.341 6.341 0 0 1 0 15.242a6.42 6.42 0 0 1 1.163-3.652 6.384 6.384 0 0 1 3.035-2.33 4.833 4.833 0 0 1 1.658-5.557 4.789 4.789 0 0 1 5.78.07 9.037 9.037 0 0 1 4.93-3.446 9.007 9.007 0 0 1 5.994.419 9.05 9.05 0 0 1 4.407 4.098 9.097 9.097 0 0 1 .873 5.965 6.298 6.298 0 0 1 3.02 2.32Zm-18.28.658 7.002 3.211 7.066-6.213a7.85 7.85 0 0 0 .152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 0 0-4.02-2.869 7.87 7.87 0 0 0-4.932.086 7.9 7.9 0 0 0-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001Zm-7.247 7.441A7.964 7.964 0 0 0 6.72 27.53a7.918 7.918 0 0 0 4.04 2.874 7.89 7.89 0 0 0 4.95-.097 7.92 7.92 0 0 0 3.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001Zm4.755-11.024-4.8-1.137.002-.002a3.82 3.82 0 0 1 1.312-4.358 3.785 3.785 0 0 1 4.538.023l-1.052 5.474Zm-5.216.01a5.294 5.294 0 0 0-2.595 1.882 5.324 5.324 0 0 0-.142 6.124 5.287 5.287 0 0 0 2.505 2l6.733-6.101-1.235-2.65-5.266-1.255Zm18.286 17.848a3.737 3.737 0 0 1-2.285-.785l1.037-5.454 4.8 1.125a3.812 3.812 0 0 1-1.801 4.68c-.54.283-1.14.432-1.751.434Zm-1.31-7.499 5.28 1.238a5.34 5.34 0 0 0 2.622-1.938 5.37 5.37 0 0 0 1.013-3.106 5.311 5.311 0 0 0-.936-3.01 5.282 5.282 0 0 0-2.475-1.944l-6.904 6.07 1.4 2.69Z",
-    className: "outline",
-    clipRule: "evenodd"
+    fill: "#0B64DD",
+    stroke: "#fff",
+    strokeWidth: 1.2,
+    d: "M27.565 11.242c5.1 1.94 4.872 9.396-.245 11.127l-.162.055-.167-.039-5.28-1.238-.268-.063-.127-.244-1.4-2.69-.217-.417.352-.31 6.904-6.07.272-.24.338.13Z"
   }), (0, _react2.jsx)("path", {
-    fill: "#FEC514",
-    d: "m12.58 13.787 7.002 3.211 7.066-6.213a7.849 7.849 0 0 0 .152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 0 0-4.02-2.869 7.87 7.87 0 0 0-4.932.086 7.9 7.9 0 0 0-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001Z"
+    fill: "#9ADC30",
+    stroke: "#fff",
+    strokeWidth: 1.2,
+    d: "m22.047 21.239 4.8 1.125.316.074.11.304.066.19c.623 1.964-.26 3.78-1.652 4.797-1.434 1.048-3.51 1.32-5.182.022l-.29-.225.069-.361 1.037-5.454.117-.615.61.143Z"
   }), (0, _react2.jsx)("path", {
-    fill: "#00BFB3",
-    d: "M5.333 21.228A7.964 7.964 0 0 0 6.72 27.53a7.918 7.918 0 0 0 4.04 2.874 7.89 7.89 0 0 0 4.95-.097 7.92 7.92 0 0 0 3.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001Z"
+    fill: "#1BA9F5",
+    stroke: "#fff",
+    strokeWidth: 1.2,
+    d: "m5.01 9.63 5.267 1.255.283.067.122.264 1.235 2.65.187.4-.328.298-6.733 6.1-.272.248-.345-.132C1.939 19.83.72 17.456.752 15.153c.032-2.308 1.321-4.644 3.932-5.508l.162-.054.165.039Z"
   }), (0, _react2.jsx)("path", {
     fill: "#F04E98",
-    d: "m5.288 9.067 4.8 1.137L11.14 4.73a3.785 3.785 0 0 0-5.914 1.94 3.82 3.82 0 0 0 .064 2.395"
+    stroke: "#fff",
+    strokeWidth: 1.2,
+    d: "M6.281 4.32c1.416-1.08 3.48-1.387 5.222-.069l.297.226-.07.366-1.053 5.474-.118.615-.609-.144-4.8-1.137-.316-.075-.11-.306c-.709-1.967.149-3.876 1.557-4.95Z"
   }), (0, _react2.jsx)("path", {
-    fill: "#1BA9F5",
-    d: "M4.872 10.214a5.294 5.294 0 0 0-2.595 1.882 5.324 5.324 0 0 0-.142 6.124 5.287 5.287 0 0 0 2.505 2l6.733-6.101-1.235-2.65-5.266-1.255Z"
+    fill: "#02BCB7",
+    stroke: "#fff",
+    strokeWidth: 1.2,
+    d: "m12.466 14.433 7.03 3.211.188.086.095.183 1.555 2.985.096.184-.04.206-1.165 6.101-.024.122-.068.103c-2.68 3.958-6.902 4.71-10.268 3.26-3.356-1.447-5.834-5.07-5.126-9.736l.033-.21.158-.144 6.884-6.25.293-.265.36.164Z"
   }), (0, _react2.jsx)("path", {
-    fill: "#93C90E",
-    d: "M20.873 27.277a3.736 3.736 0 0 0 2.285.785 3.783 3.783 0 0 0 3.101-1.63 3.812 3.812 0 0 0 .451-3.484l-4.8-1.125-1.037 5.454Z"
-  }), (0, _react2.jsx)("path", {
-    fill: "#07C",
-    d: "m21.848 20.563 5.28 1.238a5.34 5.34 0 0 0 2.622-1.938 5.37 5.37 0 0 0 1.013-3.106 5.312 5.312 0 0 0-.936-3.01 5.283 5.283 0 0 0-2.475-1.944l-6.904 6.07 1.4 2.69Z"
+    fill: "#FEC514",
+    stroke: "#fff",
+    strokeWidth: 1.2,
+    d: "M11.892 4.41C14.438.676 18.741.105 22.134 1.54c3.392 1.433 5.99 4.92 5.102 9.362l-.039.2-.153.133-7.066 6.213-.293.258-.353-.163-7.002-3.21-.201-.093-.094-.2-1.38-2.988-.081-.177.037-.19L11.8 4.633l.023-.121.07-.102Z"
   }));
 };
 var icon = exports.icon = EuiIconLogoElastic;

package/lib/components/icon/icon.styles.js

@@ -63,7 +63,7 @@ var euiIconStyles = exports.euiIconStyles = function euiIconStyles(_ref3) {
     xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xxl), ";label:xxl;"),
     // Variants
     // App icons are two-toned. This provides the base color.
-    app: /*#__PURE__*/(0, _react.css)("fill:", euiTheme.colors.textParagraph, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.textSuccess, ";};label:app;"),
+    app: /*#__PURE__*/(0, _react.css)("fill:", euiTheme.colors.textParagraph, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.primary, ";};label:app;"),
     logo: /*#__PURE__*/(0, _react.css)(";label:logo;"),
     // Loading states
     isLoading: /*#__PURE__*/(0, _react.css)("opacity:", iconLoadingOpacity, ";background-color:currentColor;border-radius:", euiTheme.border.radius.small, ";;label:isLoading;"),

package/lib/components/icon/svgs/logo_elastic.svg

@@ -1,10 +1,8 @@
 <svg data-type="logoElastic" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
-<path class="outline" fill-rule="evenodd" clip-rule="evenodd" d="M30.86 13.129C31.6052 14.1966 32.0033 15.468 32 16.77C31.9936 18.0773 31.5882 19.3514 30.838 20.422C30.0894 21.4906 29.0312 22.3042 27.806 22.753C28.1629 23.7335 28.1929 24.8031 27.8916 25.802C27.5902 26.8009 26.9736 27.6755 26.134 28.295C25.295 28.9116 24.2778 29.238 23.2366 29.2246C22.1955 29.2113 21.187 28.8589 20.364 28.221C19.2541 29.7774 17.6783 30.9407 15.864 31.543C14.0515 32.1444 12.0945 32.1525 10.277 31.566C8.45799 30.978 6.87298 29.8269 5.75104 28.279C4.62651 26.7284 4.02194 24.8615 4.02404 22.946C4.02379 22.3673 4.07735 21.7898 4.18404 21.221C2.9552 20.7806 1.89335 19.9696 1.14504 18.9C0.39516 17.828 -0.00478353 16.5502 4.31788e-05 15.242C0.00682072 13.9346 0.412573 12.6605 1.16304 11.59C1.9127 10.5213 2.97195 9.70809 4.19804 9.25999C3.83609 8.27903 3.80204 7.20715 4.10098 6.20519C4.39993 5.20323 5.01576 4.32525 5.85604 3.70299C6.69557 3.08341 7.71447 2.75496 8.7578 2.7676C9.80112 2.78023 10.8118 3.13326 11.636 3.77299C12.8377 2.09509 14.5774 0.879022 16.566 0.326994C18.5531 -0.223542 20.6689 -0.0756406 22.56 0.745994C24.4535 1.56929 26.0085 3.01527 26.967 4.84399C27.9275 6.67533 28.2354 8.77923 27.84 10.809C29.062 11.2522 30.1169 12.0625 30.86 13.129ZM12.58 13.787L19.582 16.998L26.648 10.785C26.7504 10.2723 26.8013 9.75076 26.8 9.22799C26.8008 7.536 26.2612 5.88798 25.26 4.52399C24.2612 3.16246 22.8523 2.15694 21.24 1.65499C19.6293 1.15439 17.9004 1.18454 16.308 1.74099C14.7135 2.29846 13.3396 3.35235 12.388 4.74799L11.214 10.866L12.581 13.786L12.58 13.787ZM5.33304 21.228C5.11173 22.3171 5.12081 23.4404 5.35968 24.5258C5.59856 25.6111 6.06194 26.6345 6.72004 27.53C7.72432 28.8958 9.14043 29.9032 10.76 30.404C12.3777 30.9036 14.1132 30.8696 15.71 30.307C17.3093 29.7433 18.6854 28.6812 19.636 27.277L20.802 21.175L19.247 18.19L12.217 14.979L5.33204 21.227L5.33304 21.228ZM10.088 10.204L5.28804 9.06699L5.29004 9.06499C5.01232 8.29395 4.98993 7.45402 5.22618 6.66928C5.46244 5.88453 5.9448 5.19657 6.60204 4.70699C7.25933 4.21987 8.05676 3.95883 8.87487 3.96298C9.69298 3.96713 10.4877 4.23624 11.14 4.72999L10.088 10.204ZM4.87204 10.214C3.83333 10.5581 2.92676 11.2156 2.27704 12.096C1.62569 12.9779 1.2625 14.0394 1.23708 15.1355C1.21167 16.2316 1.52527 17.3088 2.13504 18.22C2.74404 19.13 3.61904 19.83 4.64004 20.22L11.373 14.119L10.138 11.469L4.87204 10.214ZM23.158 28.062C22.3305 28.0606 21.5268 27.7845 20.873 27.277L21.91 21.823L26.71 22.948C26.9197 23.5223 26.9882 24.1387 26.9097 24.745C26.8312 25.3514 26.608 25.93 26.259 26.432C25.9119 26.9336 25.4486 27.3438 24.9086 27.6276C24.3686 27.9114 23.7681 28.0604 23.158 28.062ZM21.848 20.563L27.128 21.801C28.1827 21.4441 29.0995 20.7665 29.75 19.863C30.4021 18.958 30.7562 17.8724 30.763 16.757C30.7628 15.6821 30.4364 14.6325 29.827 13.747C29.2187 12.8626 28.3554 12.1845 27.352 11.803L20.448 17.873L21.848 20.563Z" fill="white"/>
-<path d="M12.58 13.787L19.582 16.998L26.648 10.785C26.7504 10.2724 26.8013 9.75076 26.8 9.228C26.8007 7.53601 26.2612 5.88799 25.26 4.524C24.2612 3.16247 22.8523 2.15694 21.24 1.655C19.6293 1.1544 17.9003 1.18455 16.308 1.741C14.7135 2.29847 13.3396 3.35236 12.388 4.748L11.214 10.866L12.581 13.786L12.58 13.787Z" fill="#FEC514"/>
-<path d="M5.333 21.228C5.11169 22.3171 5.12076 23.4404 5.35964 24.5258C5.59851 25.6111 6.0619 26.6345 6.72 27.53C7.72427 28.8958 9.14039 29.9032 10.76 30.404C12.3777 30.9036 14.1131 30.8696 15.71 30.307C17.3093 29.7433 18.6854 28.6812 19.636 27.277L20.802 21.175L19.247 18.19L12.217 14.979L5.332 21.227L5.333 21.228Z" fill="#00BFB3"/>
-<path d="M5.288 9.067L10.088 10.204L11.14 4.73C10.4877 4.23624 9.69294 3.96713 8.87483 3.96299C8.05672 3.95884 7.25929 4.21988 6.602 4.707C5.94476 5.19657 5.46239 5.88454 5.22614 6.66928C4.98989 7.45403 5.01228 8.29395 5.29 9.065" fill="#F04E98"/>
-<path d="M4.872 10.214C3.83329 10.5581 2.92672 11.2156 2.277 12.096C1.62565 12.9779 1.26245 14.0394 1.23704 15.1355C1.21162 16.2316 1.52522 17.3088 2.135 18.22C2.744 19.13 3.619 19.83 4.64 20.22L11.373 14.119L10.138 11.469L4.872 10.214V10.214Z" fill="#1BA9F5"/>
-<path d="M20.873 27.277C21.5267 27.7845 22.3304 28.0606 23.158 28.062C23.768 28.0605 24.3686 27.9114 24.9086 27.6276C25.4485 27.3438 25.9118 26.9336 26.259 26.432C26.608 25.93 26.8312 25.3514 26.9096 24.745C26.9881 24.1387 26.9197 23.5223 26.71 22.948L21.91 21.823L20.873 27.277Z" fill="#93C90E"/>
-<path d="M21.848 20.563L27.128 21.801C28.1827 21.4441 29.0994 20.7666 29.75 19.863C30.4021 18.958 30.7561 17.8724 30.763 16.757C30.7627 15.6821 30.4364 14.6325 29.827 13.747C29.2187 12.8626 28.3553 12.1845 27.352 11.803L20.448 17.873L21.848 20.563V20.563Z" fill="#0077CC"/>
-</svg>
-
+<path d="M27.5648 11.2425C32.6654 13.182 32.4373 20.6378 27.3197 22.3694L27.1576 22.4241L26.9906 22.3851L21.7103 21.1468L21.4427 21.0843L21.3158 20.8401L19.9154 18.1497L19.6986 17.7327L20.0511 17.4222L26.9554 11.3528L27.2269 11.1136L27.5648 11.2425Z" fill="#0B64DD" stroke="white" stroke-width="1.2"/>
+<path d="M22.0472 21.239L26.847 22.364L27.1625 22.4382L27.2738 22.7419L27.3392 22.9324C27.9615 24.8962 27.0797 26.7117 25.6869 27.7292C24.2528 28.7767 22.1775 29.0488 20.5052 27.7507L20.2152 27.5261L20.2836 27.1648L21.3207 21.7107L21.4379 21.0964L22.0472 21.239Z" fill="#9ADC30" stroke="white" stroke-width="1.2"/>
+<path d="M5.01074 9.62997L10.2773 10.8849L10.5596 10.9522L10.6816 11.2159L11.917 13.8653L12.1035 14.2667L11.7764 14.5636L5.04297 20.6642L4.77051 20.9122L4.42578 20.7804C1.9389 19.8303 0.720407 17.4558 0.751953 15.1534C0.783686 12.8453 2.07305 10.5094 4.68359 9.64462L4.8457 9.59091L5.01074 9.62997Z" fill="#1BA9F5" stroke="white" stroke-width="1.2"/>
+<path d="M6.28101 4.31982C7.69723 3.2394 9.76135 2.9334 11.5027 4.25146L11.7996 4.47705L11.7292 4.84326L10.6775 10.3169L10.5593 10.9321L9.94995 10.7876L5.15015 9.65088L4.83374 9.57568L4.72339 9.27002C4.01507 7.30295 4.87263 5.39429 6.28101 4.31982Z" fill="#F04E98" stroke="white" stroke-width="1.2"/>
+<path d="M12.4661 14.4331L19.4963 17.644L19.6838 17.73L19.7786 17.9126L21.3342 20.8979L21.4299 21.0825L21.3909 21.2876L20.2249 27.3892L20.2014 27.5112L20.1331 27.6138C17.4534 31.572 13.2305 32.3245 9.8645 30.8735C6.50932 29.4272 4.0307 25.8044 4.7395 21.1382L4.77173 20.9272L4.92993 20.7837L11.8137 14.5347L12.1067 14.269L12.4661 14.4331Z" fill="#02BCB7" stroke="white" stroke-width="1.2"/>
+<path d="M11.8923 4.41022C14.4381 0.676426 18.741 0.105303 22.1335 1.53912C25.5263 2.97302 28.1231 6.45979 27.2361 10.9024L27.197 11.1016L27.0437 11.2354L19.9783 17.4483L19.6853 17.7061L19.3318 17.543L12.3298 14.3321L12.1287 14.2403L12.0349 14.0391L10.655 11.0518L10.574 10.8751L10.6111 10.6846L11.7996 4.63287L11.823 4.51178L11.8923 4.41022Z" fill="#FEC514" stroke="white" stroke-width="1.2"/>
+</svg>

package/lib/components/key_pad_menu/key_pad_menu.js

@@ -57,7 +57,7 @@ EuiKeyPadMenu.propTypes = {
   css: _propTypes.default.any,
   /**
        * Renders the the group as a `fieldset`.
-       * Set to `true` to customize the labelling, or pass an #_EuiKeyPadMenuCheckableProps object to add a `legend` or `ariaLegend`
+       * Set to `true` to customize the labelling, or pass an {@link _EuiKeyPadMenuCheckableProps} object to add a `legend` or `ariaLegend`
        */
   checkable: _propTypes.default.oneOfType([_propTypes.default.shape({
     /**