@elastic/eui 102.1.0 → 102.2.0-snapshot.1748601905883

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

@@ -8,14 +8,17 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate } from '../../global_styling';
+import { isEuiThemeRefreshVariant } from '../../services';
+import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate, highContrastModeStyles, preventForcedColors, euiButtonEmptyColor } from '../../global_styling';
+import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports';
 import { euiFormVariables } from '../form/form.styles';
-export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: mathWithUnits(euiTheme.size.base, function (x) {
-      return x * 3;
+      return x * (isRefreshVariant ? 2.75 : 3);
     })
   };
 };
@@ -29,9 +32,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = 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
@@ -39,14 +44,44 @@ export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContex
   var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('right', '100%'), "\n      ").concat(logicalCSS('vertical', 0), "\n      ").concat(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(logicalCSS('top', '100%'), "\n      ").concat(logicalCSS('horizontal', 0), "\n      ").concat(logicalCSS('border-bottom', border), "\n    }\n  ");
+  var buttonStyles = isRefreshVariant ? "\n      ".concat(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(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(highContrastModeStyles(euiThemeContext, {
+    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat(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(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(cssSupportsHasWithNextSibling("\n          &:has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
   return {
-    euiFilterButton: /*#__PURE__*/css("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", 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__*/css("&+.euiFilterButton{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/css(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    buttonType: {
+      default: /*#__PURE__*/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__*/css("&:focus-visible{outline-offset:", mathWithUnits(euiTheme.focus.width, function (x) {
+        return isRefreshVariant ? x / 2 : x * -1;
+      }), ";}", toggleTypeStyles, ";;label:toggle;")
+    },
+    withNext: /*#__PURE__*/css(withNextSelector, "{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/css("font-weight:", isRefreshVariant ? euiTheme.font.weight.regular : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+export var euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
+  var _euiFormVariables2 = 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(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(logicalCSS('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
+  return {
+    wrapper: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", logicalCSS('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/css(logicalCSS('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), cssSupportsHasWithNextSibling("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +93,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__
 };
-export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/css(";label:euiFilterButton__content;"),
+      euiFilterButton__content: /*#__PURE__*/css(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
       hasIcon: /*#__PURE__*/css("&>.euiIcon:last-child{", logicalCSS('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
-        return x * 3;
+        return x * (isRefreshVariant ? 2 : 3);
       })), ";;label:hasNotification;")
     },
     notification: {

package/es/components/filter_group/filter_group.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form/form.styles';
@@ -22,20 +23,31 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = 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(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__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", highContrastModeStyles(euiThemeContext, {
-      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-      forced: "border: ".concat(euiTheme.border.thin, ";")
-    }), ">*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css(isRefreshVariant && "position: relative;", " display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", 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__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),
+    uncompressed: /*#__PURE__*/css("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", logicalCSS('height', controlHeight), ";}.euiFilterButton{", logicalCSS('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', mathWithUnits([controlHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/css("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", logicalCSS('height', isRefreshVariant ? mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+      return x - 2 * y;
+    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', 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/es/components/form/range/dual_range.js

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

package/es/components/form/range/range.js

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

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

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

package/es/components/form/select/select.js

@@ -88,7 +88,7 @@ export var EuiSelect = function EuiSelect(props) {
     value: value,
     onMouseUp: handleMouseUp,
     disabled: disabled
-  }, rest), hasNoInitialSelection && ___EmotionJSX("option", {
+  }, rest), hasNoInitialSelection && value === '' && ___EmotionJSX("option", {
     value: "",
     disabled: true,
     hidden: true,

package/es/components/header/header.js

@@ -99,23 +99,23 @@ EuiHeader.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.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.arrayOf(PropTypes.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.arrayOf(PropTypes.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.arrayOf(PropTypes.any.isRequired),
     /**
-       * Other props to pass to #EuiHeaderBreadcrumbs
+       * Other props to pass to {@link EuiHeaderBreadcrumbs}
        */
     breadcrumbProps: PropTypes.any
   }).isRequired),
@@ -187,23 +187,23 @@ EuiFixedHeader.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.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.arrayOf(PropTypes.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.arrayOf(PropTypes.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.arrayOf(PropTypes.any.isRequired),
     /**
-       * Other props to pass to #EuiHeaderBreadcrumbs
+       * Other props to pass to {@link EuiHeaderBreadcrumbs}
        */
     breadcrumbProps: PropTypes.any
   }).isRequired),

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -39,7 +39,7 @@ EuiHeaderBreadcrumbs.propTypes = {
   css: PropTypes.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.
      *
@@ -59,7 +59,7 @@ EuiHeaderBreadcrumbs.propTypes = {
      */
   max: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   /**
-     * The array of individual #EuiBreadcrumb items
+     * The array of individual {@link EuiBreadcrumb} items
      */
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
     className: PropTypes.string,
@@ -158,7 +158,7 @@ EuiHeaderBreadcrumbs.propTypes = {
          */
       panelStyle: PropTypes.any,
       /**
-         * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+         * Object of props passed to EuiPanel. See {@link EuiPopoverPanelProps}
          */
       panelProps: PropTypes.shape({
         element: PropTypes.oneOf(["div"]),

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

@@ -195,7 +195,7 @@ EuiHeaderLinks.propTypes = {
        */
     panelStyle: PropTypes.any,
     /**
-       * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+       * Object of props passed to EuiPanel. See {@link EuiPopoverPanelProps}
        */
     panelProps: PropTypes.shape({
       element: PropTypes.oneOf(["div"]),

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

@@ -29,29 +29,35 @@ var EuiIconLogoElastic = function EuiIconLogoElastic(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("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"
   }), ___EmotionJSX("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"
   }), ___EmotionJSX("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"
   }), ___EmotionJSX("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"
   }), ___EmotionJSX("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"
   }), ___EmotionJSX("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"
-  }), ___EmotionJSX("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"
   }));
 };
 export var icon = EuiIconLogoElastic;

package/es/components/icon/icon.styles.js

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

package/es/components/key_pad_menu/key_pad_menu.js

@@ -51,7 +51,7 @@ EuiKeyPadMenu.propTypes = {
   css: PropTypes.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.oneOfType([PropTypes.shape({
     /**

package/es/components/list_group/list_group.js

@@ -109,7 +109,7 @@ EuiListGroup.propTypes = {
        */
   gutterSize: PropTypes.any,
   /**
-       * Items to display in this group. See #EuiListGroupItem
+       * Items to display in this group. See {@link EuiListGroupItem}
        */
   listItems: PropTypes.arrayOf(PropTypes.shape({
     className: PropTypes.string,
@@ -167,7 +167,7 @@ EuiListGroup.propTypes = {
          */
     showToolTip: PropTypes.bool,
     /**
-         * An object of #EuiListGroupItemExtraAction props.
+         * An object of {@link EuiListGroupItemExtraAction} props.
          * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
          * pass `alwaysShow` if you don't want the default behavior of only showing on hover
          */

package/es/components/list_group/list_group_item.js

@@ -252,7 +252,7 @@ EuiListGroupItem.propTypes = {
        */
   showToolTip: PropTypes.bool,
   /**
-       * An object of #EuiListGroupItemExtraAction props.
+       * An object of {@link EuiListGroupItemExtraAction} props.
        * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
        * pass `alwaysShow` if you don't want the default behavior of only showing on hover
        */

package/es/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -84,11 +84,11 @@ export var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
 };
 EuiPinnableListGroup.propTypes = {
   /**
-       * Items to display in this group. See #EuiListGroupItem
+       * Items to display in this group. See {@link EuiListGroupItem}
        */
   /**
      * Extends `EuiListGroupItemProps`, at the very least, expecting a `label`.
-     * See #EuiPinnableListGroupItemProps
+     * See {@link EuiPinnableListGroupItemProps}
      */
   listItems: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
     className: PropTypes.string,
@@ -146,7 +146,7 @@ EuiPinnableListGroup.propTypes = {
          */
     showToolTip: PropTypes.bool,
     /**
-         * An object of #EuiListGroupItemExtraAction props.
+         * An object of {@link EuiListGroupItemExtraAction} props.
          * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
          * pass `alwaysShow` if you don't want the default behavior of only showing on hover
          */
@@ -289,7 +289,7 @@ EuiPinnableListGroup.propTypes = {
          */
     showToolTip: PropTypes.bool,
     /**
-         * An object of #EuiListGroupItemExtraAction props.
+         * An object of {@link EuiListGroupItemExtraAction} props.
          * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
          * pass `alwaysShow` if you don't want the default behavior of only showing on hover
          */

package/es/components/loading/loading_elastic.styles.js

@@ -10,7 +10,7 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 
 import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate } from '../../global_styling';
-var loadingElastic = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale3d(.2, .2, -.7);\n    opacity: .2;\n  }\n\n  40% {\n    transform: scale3d(1, 1, 2);\n    opacity: 1;\n  }\n\n  50% {\n    transform: scale3d(.99, .99, 2);\n  }\n\n  70% {\n    transform: scale3d(.96, .96, -2.5);\n  }\n\n  100% {\n    transform: scale3d(.98, .98, 2);\n  }\n"])));
+var loadingElastic = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale3d(.2, .2, -.7);\n  }\n\n  40% {\n    transform: scale3d(1, 1, 2);\n  }\n\n  50% {\n    transform: scale3d(.99, .99, 2);\n  }\n\n  70% {\n    transform: scale3d(.96, .96, -2.5);\n  }\n\n  100% {\n    transform: scale3d(.98, .98, 2);\n  }\n"])));
 export var euiLoadingElasticStyles = {
-  euiLoadingElastic: /*#__PURE__*/css("position:relative;display:inline-block;& path{", euiCanAnimate, "{animation-name:", loadingElastic, ";animation-fill-mode:forwards;animation-direction:alternate;transform-style:preserve-3d;animation-duration:1s;animation-timing-function:cubic-bezier(0, 0.63, 0.49, 1);animation-iteration-count:infinite;transform-origin:50% 50%;}&:nth-of-type(1){display:none;}&:nth-of-type(2){animation-delay:0.035s;}&:nth-of-type(3){animation-delay:0.125s;}&:nth-of-type(4){animation-delay:0.155s;}&:nth-of-type(5){animation-delay:0.075s;}&:nth-of-type(6){animation-delay:0.06s;}};label:euiLoadingElastic;")
+  euiLoadingElastic: /*#__PURE__*/css("position:relative;display:inline-block;& path{", euiCanAnimate, "{animation-name:", loadingElastic, ";animation-fill-mode:forwards;animation-direction:alternate;transform-style:preserve-3d;animation-duration:1s;animation-timing-function:cubic-bezier(0, 0.63, 0.49, 1);animation-iteration-count:infinite;transform-origin:50% 50%;}&:nth-of-type(1){animation-delay:0;}&:nth-of-type(2){animation-delay:0.035s;}&:nth-of-type(3){animation-delay:0.125s;}&:nth-of-type(4){animation-delay:0.155s;}&:nth-of-type(5){animation-delay:0.075s;}&:nth-of-type(6){animation-delay:0.06s;}};label:euiLoadingElastic;")
 };

package/es/components/loading/loading_spinner.js

@@ -57,7 +57,7 @@ EuiLoadingSpinner.propTypes = {
   /**
        * Sets the color of the border and highlight.
        * Each key accepts any valid CSS color value as a `string`
-       * See #EuiLoadingSpinnerColor
+       * See {@link EuiLoadingSpinnerColor}
        */
   color: PropTypes.shape({
     border: PropTypes.any,

package/es/components/markdown_editor/markdown_editor_footer.js

@@ -14,7 +14,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import React, { useState, useMemo, Fragment, forwardRef, useContext } from 'react';
 import PropTypes from "prop-types";
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiTitle } from '../title';
@@ -79,6 +79,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
   var syntaxTitle = useEuiI18n('euiMarkdownEditorFooter.syntaxTitle', 'Syntax help');
   var _useContext = useContext(EuiMarkdownContext),
     readOnly = _useContext.readOnly;
+  var helpModalTitleId = useGeneratedHtmlId();
   if (isUploadingFiles) {
     uploadButton = ___EmotionJSX(EuiButtonIcon, {
       size: "s",
@@ -169,8 +170,11 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
     })), isShowingHelpModal && ___EmotionJSX(EuiModal, {
       onClose: function onClose() {
         return setIsShowingHelpModal(false);
-      }
-    }, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiTitle, null, ___EmotionJSX("h1", null, syntaxTitle))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, null, ___EmotionJSX(EuiI18n, {
+      },
+      "aria-labelledby": helpModalTitleId
+    }, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiTitle, null, ___EmotionJSX("h1", {
+      id: helpModalTitleId
+    }, syntaxTitle))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, null, ___EmotionJSX(EuiI18n, {
       tokens: ['euiMarkdownEditorFooter.syntaxModalDescriptionPrefix', 'euiMarkdownEditorFooter.syntaxModalDescriptionSuffix'],
       defaults: ['This editor uses', 'You can also utilize these additional syntax plugins to add rich content to your text.']
     }, function (_ref3) {
@@ -218,7 +222,8 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
         return setIsShowingHelpPopover(false);
       },
       panelPaddingSize: "s",
-      anchorPosition: "upCenter"
+      anchorPosition: "upCenter",
+      "aria-labelledby": helpModalTitleId
     }, ___EmotionJSX(EuiI18n, {
       tokens: ['euiMarkdownEditorFooter.syntaxPopoverDescription'],
       defaults: ['This editor uses']

package/es/components/page/page_header/page_header_content.js

@@ -372,7 +372,7 @@ EuiPageHeaderContent.propTypes = {
          */
       panelStyle: PropTypes.any,
       /**
-         * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+         * Object of props passed to EuiPanel. See {@link EuiPopoverPanelProps}
          */
       panelProps: PropTypes.shape({
         element: PropTypes.oneOf(["div"]),

package/es/components/popover/popover.js

@@ -612,7 +612,7 @@ EuiPopover.propTypes = {
      */
   panelStyle: PropTypes.any,
   /**
-     * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+     * Object of props passed to EuiPanel. See {@link EuiPopoverPanelProps}
      */
   panelProps: PropTypes.shape({
     element: PropTypes.oneOf(["div"]),

package/es/components/responsive/hide_for.js

@@ -27,7 +27,7 @@ EuiHideFor.propTypes = {
   children: PropTypes.node.isRequired,
   /**
      * List of all the responsive sizes to hide the children for.
-     * Array of #EuiBreakpointSize
+     * Array of {@link EuiBreakpointSize}
      */
   sizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any.isRequired).isRequired, PropTypes.oneOf(["all", "none"])]).isRequired
 };

package/es/components/responsive/show_for.js

@@ -27,7 +27,7 @@ EuiShowFor.propTypes = {
   children: PropTypes.node.isRequired,
   /**
      * List of all the responsive sizes to show the children for.
-     * Array of #EuiBreakpointSize
+     * Array of {@link EuiBreakpointSize}
      */
   sizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any.isRequired).isRequired, PropTypes.oneOf(["all", "none"])]).isRequired
 };

package/es/components/search_bar/filters/field_value_selection_filter.js

@@ -297,6 +297,7 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX(EuiFilterButton, {
           iconType: "arrowDown",
           iconSide: "right",
+          isSelected: active,
           hasActiveFilters: active,
           numActiveFilters: active ? activeItemsCount : undefined,
           grow: true,
@@ -404,7 +405,7 @@ FieldValueSelectionFilter.propTypes = {
     field: PropTypes.string,
     name: PropTypes.string.isRequired,
     /**
-       * See #FieldValueOptionType
+       * See {@link FieldValueOptionType}
        */
     options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
       field: PropTypes.string,

package/es/components/search_bar/filters/field_value_toggle_filter.js

@@ -78,8 +78,10 @@ export var FieldValueToggleFilter = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

package/es/components/search_bar/filters/field_value_toggle_group_filter.js

@@ -79,9 +79,11 @@ export var FieldValueToggleGroupFilter = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX(EuiFilterButton, {
           key: key,
           onClick: onClick,
+          isSelected: active,
           hasActiveFilters: active,
           "aria-pressed": !!active,
-          withNext: !isLastItem
+          withNext: !isLastItem,
+          isToggle: true
         }, name);
       });
     }
@@ -93,7 +95,7 @@ FieldValueToggleGroupFilter.propTypes = {
     type: PropTypes.oneOf(["field_value_toggle_group"]).isRequired,
     field: PropTypes.string.isRequired,
     /**
-       * See #FieldValueToggleGroupFilterItemType
+       * See {@link FieldValueToggleGroupFilterItemType}
        */
     items: PropTypes.arrayOf(PropTypes.shape({
       value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired, PropTypes.bool.isRequired]).isRequired,

package/es/components/search_bar/filters/is_filter.js

@@ -74,8 +74,10 @@ export var IsFilter = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);