@elastic/eui 98.0.0 → 98.1.0

package/es/components/text_diff/text_diff.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useMemo } from 'react';
 import Diff from 'text-diff';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiTextDiffStyles } from './text_diff.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useEuiTextDiff = function useEuiTextDiff(_ref) {
@@ -38,8 +38,7 @@ export var useEuiTextDiff = function useEuiTextDiff(_ref) {
     return diff.main(beforeText, afterText);
   }, [beforeText, afterText, timeout]); // produces diff array
 
-  var euiTheme = useEuiTheme();
-  var styles = euiTextDiffStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTextDiffStyles);
   var classes = classNames('euiTextDiff', className);
   var rendereredHtml = useMemo(function () {
     var html = [];

package/es/components/toast/global_toast_list_item.js

@@ -14,17 +14,14 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import classNames from 'classnames';
 import PropTypes from "prop-types";
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiGlobalToastListItemStyles } from './global_toast_list.styles';
 export var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     isDismissed = _ref.isDismissed;
-  var euiTheme = useEuiTheme();
-  if (!children) {
-    return null;
-  }
-  var styles = euiGlobalToastListItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiGlobalToastListItemStyles);
+  if (!children) return null;
   var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
   var classes = classNames('euiGlobalToastListItem', children.props.className, className);
   return cloneElementWithCss(children, _objectSpread(_objectSpread({}, children.props), {

package/es/components/tour/_tour_footer.js

@@ -17,7 +17,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  */
 
 import React, { useMemo, memo } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiPopoverFooter } from '../popover';
 import { EuiButtonEmpty } from '../button';
@@ -30,8 +30,7 @@ export var EuiTourFooter = /*#__PURE__*/memo(function (_ref) {
     step = _ref.step,
     stepsTotal = _ref.stepsTotal,
     onFinish = _ref.onFinish;
-  var euiTheme = useEuiTheme();
-  var footerStyles = euiTourFooterStyles(euiTheme);
+  var footerStyles = useEuiMemoizedStyles(euiTourFooterStyles);
   var customFooterAction = useMemo(function () {
     if (!footerAction) return null;
     return Array.isArray(footerAction) ? ___EmotionJSX(EuiFlexGroup, {

package/es/components/tour/_tour_header.js

@@ -8,7 +8,7 @@
 
 import React, { memo } from 'react';
 import PropTypes from "prop-types";
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiPopoverTitle } from '../popover';
 import { EuiTitle } from '../title';
 import { euiTourHeaderStyles } from './_tour_header.styles';
@@ -17,8 +17,7 @@ export var EuiTourHeader = /*#__PURE__*/memo(function (_ref) {
   var id = _ref.id,
     title = _ref.title,
     subtitle = _ref.subtitle;
-  var euiTheme = useEuiTheme();
-  var headerStyles = euiTourHeaderStyles(euiTheme);
+  var headerStyles = useEuiMemoizedStyles(euiTourHeaderStyles);
   return ___EmotionJSX(EuiPopoverTitle, {
     css: headerStyles.euiTourHeader,
     className: "euiTourHeader",

package/es/components/tour/tour_step.js

@@ -25,10 +25,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiMemoizedStyles } from '../../services';
 import { logicalStyles } from '../../global_styling';
-import { EuiBeacon } from '../beacon';
 import { EuiPopover, EuiWrappingPopover } from '../popover';
-import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiTheme } from '../../services';
+import { EuiBeacon } from '../beacon';
 import { EuiTourHeader } from './_tour_header';
 import { EuiTourFooter } from './_tour_footer';
 import { euiTourStyles, euiTourBeaconStyles } from './tour.styles';
@@ -94,9 +94,8 @@ export var EuiTourStep = function EuiTourStep(_ref) {
   }, [anchor]);
   var anchorClasses = classNames('euiTourAnchor', className);
   var popoverClasses = classNames('euiTour', panelClassName);
-  var euiTheme = useEuiTheme();
-  var tourStyles = euiTourStyles(euiTheme);
-  var beaconStyles = euiTourBeaconStyles(euiTheme);
+  var tourStyles = useEuiMemoizedStyles(euiTourStyles);
+  var beaconStyles = useEuiMemoizedStyles(euiTourBeaconStyles);
   var beaconCss = [beaconStyles.euiTourBeacon, isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition]];
   var hasBeacon = decoration === 'beacon';
   var widthStyles = useMemo(function () {

package/es/components/tree_view/tree_view_item.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiIcon } from '../icon';
 import { euiTreeViewItemStyles } from './tree_view_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,8 +31,7 @@ export var EuiTreeViewItem = /*#__PURE__*/memo(function (_ref) {
     buttonRef = _ref.buttonRef,
     wrapperProps = _ref.wrapperProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiTreeViewItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTreeViewItemStyles);
   var wrapperClasses = classNames('euiTreeView__node', {
     'euiTreeView__node--expanded': isExpanded
   }, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);

package/es/global_styling/mixins/_helpers.js

@@ -166,10 +166,4 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
  */
 export var euiFullHeight = function euiFullHeight() {
   return "\n  ".concat(logicalCSS('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
-};
-
-/**
- * A constant storing the support for the `:has()` selector through a
- * media query that will only apply the content it is supported.
- */
-export var euiSupportsHas = '@supports(selector(:has(p)))';
+};

package/eui.d.ts

@@ -1487,11 +1487,6 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	 * For quickly applying a full-height element whether using flex or not
 	 */
 	export const euiFullHeight: () => string;
-	/**
-	 * A constant storing the support for the `:has()` selector through a
-	 * media query that will only apply the content it is supported.
-	 */
-	export const euiSupportsHas = "@supports(selector(:has(p)))";
 	export {};
 
 }
@@ -4807,14 +4802,9 @@ declare module '@elastic/eui/src/components/flex/flex_group' {
 	     * such as `'div'` or `'span'`, a React component (a function, a class,
 	     * or an exotic component like `memo()`).
 	     *
-	     * `<EuiFlexGroup>` accepts and forwards all extra props to the custom
+	     * `EuiFlexGroup` accepts and forwards all extra props to the custom
 	     * component.
 	     *
-	     * @example
-	     * // Renders a <button> element
-	     * <EuiFlexGroup component="button">
-	     *   Submit form
-	     * </EuiFlexGroup>
 	     * @default "div"
 	     */
 	    component?: TComponent;
@@ -4835,14 +4825,9 @@ declare module '@elastic/eui/src/components/flex/flex_group' {
 	     * such as `'div'` or `'span'`, a React component (a function, a class,
 	     * or an exotic component like `memo()`).
 	     *
-	     * `<EuiFlexGroup>` accepts and forwards all extra props to the custom
+	     * `EuiFlexGroup` accepts and forwards all extra props to the custom
 	     * component.
 	     *
-	     * @example
-	     * // Renders a <button> element
-	     * <EuiFlexGroup component="button">
-	     *   Submit form
-	     * </EuiFlexGroup>
 	     * @default "div"
 	     */
 	    component?: TComponent | undefined;
@@ -8223,6 +8208,7 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge.styles'
 	    accent: import("@emotion/utils").SerializedStyles;
 	    subdued: import("@emotion/utils").SerializedStyles;
 	    hollow: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
 	    badgeSizes: {
@@ -8246,7 +8232,7 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiToolTipProps, ToolTipPositions } from '@elastic/eui/src/components/tool_tip';
 	import { IconType } from '@elastic/eui/src/components/icon';
-	export const COLORS: readonly ["accent", "subdued", "hollow"];
+	export const COLORS: readonly ["accent", "subdued", "hollow", "warning"];
 	export type BetaBadgeColor = (typeof COLORS)[number];
 	export const SIZES: readonly ["s", "m"];
 	export type BetaBadgeSize = (typeof SIZES)[number];
@@ -8304,7 +8290,7 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	     */
 	    title?: string;
 	    /**
-	     * Accepts accent, subdued and hollow.
+	     * Accepts accent, subdued, hollow and warning.
 	     */
 	    color?: BetaBadgeColor;
 	    size?: BetaBadgeSize;
@@ -11198,7 +11184,8 @@ declare module '@elastic/eui/src/components/code/code_block_copy' {
 	/**
 	 * Hook that returns copy-related state/logic/utils
 	 */
-	export const useCopy: ({ isCopyable, isVirtualized, children, }: {
+	export const useCopy: ({ copyAriaLabel, isCopyable, isVirtualized, children, }: {
+	    copyAriaLabel?: string | undefined;
 	    isCopyable: boolean;
 	    isVirtualized: boolean;
 	    children: ReactNode;
@@ -11396,6 +11383,12 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	     * Displays an icon button to copy the code snippet to the clipboard.
 	     */
 	    isCopyable?: boolean;
+	    /**
+	     * Customizes the aria-label for the copy button.
+	     *
+	     * @default 'Copy'
+	     */
+	    copyAriaLabel?: string;
 	    /**
 	     * Displays line numbers.
 	     * Optionally accepts a configuration object for setting the starting number,
@@ -24131,9 +24124,9 @@ declare module '@elastic/eui/src/components/tour/tour.styles' {
 }
 declare module '@elastic/eui/src/components/tour/tour_step' {
 	import { CSSProperties, HTMLAttributes, FunctionComponent, ReactElement, ReactNode } from 'react';
+	import { ElementTarget } from '@elastic/eui/src/services';
 	import { CommonProps, ExclusiveUnion, NoArgCallback } from '@elastic/eui/src/components/common';
-	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
-	import { ElementTarget } from '@elastic/eui/src/services'; type _EuiPopoverProps = EuiPopoverProps & Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title' | 'step'>; type _PopoverOverrides = 'button' | 'closePopover'; type _PopoverPartials = 'closePopover'; type ExtendedEuiPopoverProps = Omit<_EuiPopoverProps, _PopoverOverrides> & Partial<Pick<EuiPopoverProps, _PopoverPartials>>;
+	import { EuiPopoverProps } from '@elastic/eui/src/components/popover'; type _EuiPopoverProps = EuiPopoverProps & Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title' | 'step'>; type _PopoverOverrides = 'button' | 'closePopover'; type _PopoverPartials = 'closePopover'; type ExtendedEuiPopoverProps = Omit<_EuiPopoverProps, _PopoverOverrides> & Partial<Pick<EuiPopoverProps, _PopoverPartials>>;
 	export type EuiTourStepAnchorProps = ExclusiveUnion<{
 	    /**
 	     * Element to which the tour step popover attaches when open
@@ -31555,6 +31548,7 @@ declare module '@elastic/eui' {
 "euiResizableButton.horizontalResizerAriaLabel": any;
 "euiResizableButton.verticalResizerAriaLabel": any;
 "euiResizablePanel.toggleButtonAriaLabel": any;
+"euiFieldValueSelectionFilter.buttonLabelHint": any;
 "euiSearchBox.placeholder": any;
 "euiSearchBox.incrementalAriaLabel": any;
 "euiSearchBox.ariaLabel": any;

package/i18ntokens.json

@@ -437,14 +437,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 44,
-        "column": 24,
-        "index": 1519
+        "line": 46,
+        "column": 31,
+        "index": 1569
       },
       "end": {
-        "line": 44,
-        "column": 67,
-        "index": 1562
+        "line": 46,
+        "column": 74,
+        "index": 1612
       }
     },
     "filepath": "src/components/code/code_block_copy.tsx"
@@ -4721,14 +4721,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 110,
+        "line": 109,
         "column": 12,
-        "index": 3054
+        "index": 3041
       },
       "end": {
-        "line": 110,
+        "line": 109,
         "column": 70,
-        "index": 3112
+        "index": 3099
       }
     },
     "filepath": "src/components/error_boundary/error_boundary.tsx"
@@ -5171,14 +5171,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 172,
+        "line": 171,
         "column": 37,
-        "index": 5274
+        "index": 5264
       },
       "end": {
-        "line": 175,
+        "line": 174,
         "column": 3,
-        "index": 5350
+        "index": 5340
       }
     },
     "filepath": "src/components/inline_edit/inline_edit_form.tsx"
@@ -5189,14 +5189,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 176,
+        "line": 175,
         "column": 39,
-        "index": 5391
+        "index": 5381
       },
       "end": {
-        "line": 179,
+        "line": 178,
         "column": 3,
-        "index": 5471
+        "index": 5461
       }
     },
     "filepath": "src/components/inline_edit/inline_edit_form.tsx"
@@ -5207,14 +5207,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 300,
+        "line": 299,
         "column": 10,
-        "index": 9596
+        "index": 9598
       },
       "end": {
-        "line": 303,
+        "line": 302,
         "column": 12,
-        "index": 9775
+        "index": 9777
       }
     },
     "filepath": "src/components/inline_edit/inline_edit_form.tsx"
@@ -5225,14 +5225,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 391,
+        "line": 390,
         "column": 10,
-        "index": 12623
+        "index": 12625
       },
       "end": {
-        "line": 394,
+        "line": 393,
         "column": 12,
-        "index": 12764
+        "index": 12766
       }
     },
     "filepath": "src/components/inline_edit/inline_edit_form.tsx"
@@ -5333,14 +5333,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 45,
+        "line": 44,
         "column": 25,
-        "index": 1302
+        "index": 1289
       },
       "end": {
-        "line": 48,
+        "line": 47,
         "column": 3,
-        "index": 1369
+        "index": 1356
       }
     },
     "filepath": "src/components/mark/mark.tsx"
@@ -5351,14 +5351,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 49,
+        "line": 48,
         "column": 23,
-        "index": 1394
+        "index": 1381
       },
       "end": {
-        "line": 49,
+        "line": 48,
         "column": 74,
-        "index": 1445
+        "index": 1432
       }
     },
     "filepath": "src/components/mark/mark.tsx"
@@ -5911,12 +5911,12 @@
       "start": {
         "line": 700,
         "column": 16,
-        "index": 20806
+        "index": 20852
       },
       "end": {
         "line": 703,
         "column": 18,
-        "index": 21000
+        "index": 21046
       }
     },
     "filepath": "src/components/popover/popover.tsx"
@@ -5993,6 +5993,24 @@
     },
     "filepath": "src/components/resizable_container/resizable_panel.tsx"
   },
+  {
+    "token": "euiFieldValueSelectionFilter.buttonLabelHint",
+    "defString": "Selection",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 302,
+        "column": 6,
+        "index": 8608
+      },
+      "end": {
+        "line": 305,
+        "column": 7,
+        "index": 8713
+      }
+    },
+    "filepath": "src/components/search_bar/filters/field_value_selection_filter.tsx"
+  },
   {
     "token": "euiSearchBox.placeholder",
     "defString": "Search...",
@@ -6989,14 +7007,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 95,
+        "line": 93,
         "column": 14,
-        "index": 2888
+        "index": 2872
       },
       "end": {
-        "line": 102,
+        "line": 100,
         "column": 15,
-        "index": 3156
+        "index": 3140
       }
     },
     "filepath": "src/components/tour/_tour_footer.tsx"
@@ -7007,14 +7025,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 95,
+        "line": 93,
         "column": 14,
-        "index": 2888
+        "index": 2872
       },
       "end": {
-        "line": 102,
+        "line": 100,
         "column": 15,
-        "index": 3156
+        "index": 3140
       }
     },
     "filepath": "src/components/tour/_tour_footer.tsx"
@@ -7025,14 +7043,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 95,
+        "line": 93,
         "column": 14,
-        "index": 2888
+        "index": 2872
       },
       "end": {
-        "line": 102,
+        "line": 100,
         "column": 15,
-        "index": 3156
+        "index": 3140
       }
     },
     "filepath": "src/components/tour/_tour_footer.tsx"

package/lib/components/badge/beta_badge/beta_badge.js

@@ -25,7 +25,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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 COLORS = exports.COLORS = ['accent', 'subdued', 'hollow'];
+var COLORS = exports.COLORS = ['accent', 'subdued', 'hollow', 'warning'];
 var SIZES = exports.SIZES = ['s', 'm'];
 var ALIGNMENTS = exports.ALIGNMENTS = ['baseline', 'middle'];
 
@@ -178,7 +178,7 @@ EuiBetaBadge.propTypes = {
      */
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.string])]),
   /**
-     * Accepts accent, subdued and hollow.
+     * Accepts accent, subdued, hollow and warning.
      */
   color: _propTypes.default.any,
   size: _propTypes.default.any,

package/lib/components/badge/beta_badge/beta_badge.styles.js

@@ -50,6 +50,7 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
     accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
     subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
+    warning: /*#__PURE__*/(0, _react.css)(badgeColors.warning, ";label:warning;"),
     // Font sizes
     m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";line-height:", euiTheme.size.l, ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)("font-size:0.625rem;line-height:", (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {

package/lib/components/card/card.js

@@ -389,7 +389,7 @@ EuiCard.propTypes = {
        */
     title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.string])]),
     /**
-       * Accepts accent, subdued and hollow.
+       * Accepts accent, subdued, hollow and warning.
        */
     color: _propTypes.default.any,
     size: _propTypes.default.any,

package/lib/components/card/card.styles.js

@@ -128,7 +128,7 @@ var euiCardTextStyles = exports.euiCardTextStyles = function euiCardTextStyles(e
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCard__text: _ref,
-    interactive: /*#__PURE__*/(0, _react.css)("outline-offset:", euiTheme.size.xxs, ";.euiCard:hover &,.euiCard:focus &,&:hover,&:focus{text-decoration:underline;}", _global_styling.euiSupportsHas, "{outline:none!important;};label:interactive;"),
+    interactive: /*#__PURE__*/(0, _react.css)("outline-offset:", euiTheme.size.xxs, ";.euiCard:hover &,.euiCard:focus &,&:hover,&:focus{text-decoration:underline;};label:interactive;"),
     aligned: {
       center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;"),
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
@@ -142,7 +142,7 @@ var euiCardBetaBadgeStyles = exports.euiCardBetaBadgeStyles = function euiCardBe
   var padding = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
   return {
     hasBetaBadge: /*#__PURE__*/(0, _react.css)("position:relative;overflow:visible;", (0, _global_styling.logicalCSS)('padding-top', "calc(".concat(padding, " + ").concat(euiTheme.size.s, ")")), ";;label:hasBetaBadge;"),
-    euiCard__betaBadgeAnchor: /*#__PURE__*/(0, _react.css)("line-height:0;position:absolute;", (0, _global_styling.logicalCSS)('top', '0'), " ", (0, _global_styling.logicalCSS)('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", (0, _global_styling.logicalCSS)('min-width', 'min(30%, 112px)'), " ", (0, _global_styling.logicalCSS)('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
+    euiCard__betaBadgeAnchor: /*#__PURE__*/(0, _react.css)("line-height:0;position:absolute;", (0, _global_styling.logicalCSS)('top', '0'), " ", (0, _global_styling.logicalCSS)('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", (0, _global_styling.logicalCSS)('min-width', "min(30%, ".concat(euiTheme.base * 7, "px)")), " ", (0, _global_styling.logicalCSS)('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
     euiCard__betaBadge: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiCard__betaBadge;")
   };
 };

package/lib/components/code/code_block.js

@@ -16,7 +16,7 @@ var _code_block_controls = require("./code_block_controls");
 var _code_block_virtualized = require("./code_block_virtualized");
 var _code_block = require("./code_block.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
+var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "copyAriaLabel", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -64,6 +64,7 @@ var EuiCodeBlock = exports.EuiCodeBlock = function EuiCodeBlock(_ref) {
     fontSize = _ref$fontSize === void 0 ? 's' : _ref$fontSize,
     _ref$isCopyable = _ref.isCopyable,
     isCopyable = _ref$isCopyable === void 0 ? false : _ref$isCopyable,
+    copyAriaLabel = _ref.copyAriaLabel,
     _ref$whiteSpace = _ref.whiteSpace,
     whiteSpace = _ref$whiteSpace === void 0 ? 'pre-wrap' : _ref$whiteSpace,
     children = _ref.children,
@@ -104,6 +105,7 @@ var EuiCodeBlock = exports.EuiCodeBlock = function EuiCodeBlock(_ref) {
     return !!(_isVirtualized && Array.isArray(data));
   }, [_isVirtualized, data]);
   var _useCopy = (0, _code_block_copy.useCopy)({
+      copyAriaLabel: copyAriaLabel,
       isCopyable: isCopyable,
       isVirtualized: isVirtualized,
       children: children
@@ -207,6 +209,12 @@ EuiCodeBlock.propTypes = {
      * Displays an icon button to copy the code snippet to the clipboard.
      */
   isCopyable: _propTypes.default.bool,
+  /**
+     * Customizes the aria-label for the copy button.
+     *
+     * @default 'Copy'
+     */
+  copyAriaLabel: _propTypes.default.string,
   /**
      * Displays line numbers.
      * Optionally accepts a configuration object for setting the starting number,

package/lib/components/code/code_block_copy.js

@@ -29,7 +29,8 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
  * Hook that returns copy-related state/logic/utils
  */
 var useCopy = exports.useCopy = function useCopy(_ref) {
-  var isCopyable = _ref.isCopyable,
+  var copyAriaLabel = _ref.copyAriaLabel,
+    isCopyable = _ref.isCopyable,
     isVirtualized = _ref.isVirtualized,
     children = _ref.children;
   var _useInnerText = (0, _inner_text.useInnerText)(''),
@@ -52,7 +53,7 @@ var useCopy = exports.useCopy = function useCopy(_ref) {
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
   var showCopyButton = isCopyable && textToCopy;
-  var copyAriaLabel = (0, _i18n.useEuiI18n)('euiCodeBlockCopy.copy', 'Copy');
+  var copyDefaultAriaLabel = (0, _i18n.useEuiI18n)('euiCodeBlockCopy.copy', 'Copy');
   var copyButton = (0, _react.useMemo)(function () {
     return showCopyButton ? (0, _react2.jsx)("div", {
       className: "euiCodeBlock__copyButton"
@@ -63,11 +64,11 @@ var useCopy = exports.useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel,
+        "aria-label": copyAriaLabel || copyDefaultAriaLabel,
         "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
-  }, [showCopyButton, textToCopy, copyAriaLabel]);
+  }, [copyAriaLabel, copyDefaultAriaLabel, showCopyButton, textToCopy]);
   return {
     innerTextRef: innerTextRef,
     copyButton: copyButton

package/lib/components/drag_and_drop/draggable.js

@@ -56,8 +56,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_droppable.EuiDroppableContext),
     cloneItems = _useContext.cloneItems;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _draggable.euiDraggableStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_draggable.euiDraggableStyles);
   var hasCustomDragHandle = customDragHandle !== false;
   return (0, _react2.jsx)(_dnd.Draggable, _extends({
     draggableId: draggableId,

package/lib/components/drag_and_drop/droppable.js

@@ -56,8 +56,7 @@ var EuiDroppable = exports.EuiDroppable = function EuiDroppable(_ref) {
   var _useContext = (0, _react.useContext)(_drag_drop_context.EuiDragDropContextContext),
     isDraggingType = _useContext.isDraggingType;
   var dropIsDisabled = cloneDraggables ? true : isDropDisabled;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _droppable.euiDroppableStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_droppable.euiDroppableStyles);
   return (0, _react2.jsx)(_dnd.Droppable, _extends({
     isDropDisabled: dropIsDisabled,
     droppableId: droppableId,