@elastic/eui 122.0.0 → 122.1.0

package/test-env/components/button/button_group/button_group.styles.js

@@ -45,7 +45,7 @@ var euiButtonGroupButtonsStyles = exports.euiButtonGroupButtonsStyles = function
       })
     },
     radius: {
-      outer: euiTheme.border.radius.medium,
+      outer: euiTheme.border.radius.control,
       inner: buttonSizeMap.s.radiusInset
     },
     size: {
@@ -69,7 +69,7 @@ var euiButtonGroupButtonsStyles = exports.euiButtonGroupButtonsStyles = function
   var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n\n      &:focus-visible {\n        outline-offset: 0;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ",\n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
   return {
     // Base
-    euiButtonGroup__container: /*#__PURE__*/(0, _react.css)("&:where(", segmentedStyledSelector, " &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;z-index:", euiTheme.levels.content, ";padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";", containerBorderStyles, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}}&:where([data-variant='selection'][data-display='inverse'] &){background-color:", euiTheme.colors.backgroundBaseSubdued, ";};label:euiButtonGroup__container;"),
+    euiButtonGroup__container: /*#__PURE__*/(0, _react.css)("&:where(", segmentedStyledSelector, " &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;z-index:", euiTheme.levels.content, ";padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", buttonGroupVariables.backgroundColor, ";", containerBorderStyles, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}}&:where([data-variant='selection'][data-display='inverse'] &){background-color:", euiTheme.colors.backgroundBaseSubdued, ";};label:euiButtonGroup__container;"),
     euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;align-items:center;z-index:", euiTheme.levels.content, ";&:where(.euiButtonGroup:not([data-variant]) &){", containerCommonStyles, " padding:", containerPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";", containerBorderStyles, ";}&:where([data-variant='default'] &){flex-wrap:wrap;}&:where(", segmentedStyledSelector, " &){flex-wrap:wrap;", containerCommonStyles, " ", segmentedChildrenStyles, " *:where(.euiButton, .euiButtonIcon){&:where(:is(", _global_styling.euiDisabledSelector, "):not([aria-pressed='true'])){background-color:transparent;}}&:where([data-dividers='true'] &){", dividerStyles, ";}&:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}}&:where([data-variant='segmented'] &){*:where(.euiButton, .euiButtonIcon):is(", _global_styling.euiDisabledSelector, "){background-color:transparent;}}&:where([data-variant='selection'] &){*:where(.euiButton, .euiButtonIcon){&:is(", _global_styling.euiDisabledSelector, "){", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       forced: "\n              opacity: 0.5;\n            "
     }), ";}&:is([aria-pressed='true']){", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {

package/test-env/components/button/split_button/split_button.styles.js

@@ -21,10 +21,10 @@ var euiSplitButtonStyles = exports.euiSplitButtonStyles = function euiSplitButto
   var euiTheme = euiThemeContext.euiTheme;
   var buttonSizeMap = (0, _global_styling.euiButtonSizeMap)(euiThemeContext);
   var borderStyles = function borderStyles(color) {
-    return "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(color, ";\n      border-radius: ").concat(euiTheme.border.radius.small, ";\n      pointer-events: none;\n    }\n  ");
+    return "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(color, ";\n      border-radius: ").concat(euiTheme.border.radius.control, ";\n      pointer-events: none;\n    }\n  ");
   };
   return {
-    euiSplitButton: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-flex;align-items:center;flex-wrap:nowrap;max-inline-size:fit-content;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";background-color:", backgroundColor, ";&:where([data-size='s']){block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m']){block-size:", buttonSizeMap.m.height, ";}&:where(", hasAllDisabledActionsSelector, "){background-color:", euiTheme.colors.backgroundBaseDisabled, ";};label:euiSplitButton;"),
+    euiSplitButton: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-flex;align-items:center;flex-wrap:nowrap;max-inline-size:fit-content;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.control, ";background-color:", backgroundColor, ";&:where([data-size='s']){block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m']){block-size:", buttonSizeMap.m.height, ";}&:where(", hasAllDisabledActionsSelector, "){background-color:", euiTheme.colors.backgroundBaseDisabled, ";};label:euiSplitButton;"),
     hasBorder: /*#__PURE__*/(0, _react.css)((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
       none: "\n          &:where(:not([data-fill])):not(".concat(hasAllDisabledActionsSelector, ") {\n            ").concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n          }\n        "),
       preferred: "\n          &:where(:not([data-fill])) {\n            ".concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n\n            &:where(").concat(hasAllDisabledActionsSelector, ") {\n              ").concat(borderStyles(euiTheme.colors.borderBaseDisabled), "\n            }\n          }\n\n          &:where([data-fill]").concat(hasAllDisabledActionsSelector, ") {\n            ").concat(borderStyles(euiTheme.colors.borderBaseDisabled), "\n          }\n        "),

package/test-env/components/call_out/call_out.styles.js

@@ -17,14 +17,15 @@ var _global_styling = require("../../global_styling");
 /** Maximum reading width for `text` and `children` slots. */
 var TEXT_MAX_WIDTH = 1200;
 var euiCallOutStyles = exports.euiCallOutStyles = function euiCallOutStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var paddingSizes = {
     s: euiTheme.size.m,
     m: euiTheme.size.base
   };
-  var borderRadius = euiTheme.border.radius.small;
+  var borderRadius = euiTheme.border.radius.panel;
   var highlightSize = (0, _global_styling.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
-    return x + y;
+    return highContrastMode ? x * 2 + y : x + y;
   });
   var highlightOffset = euiTheme.border.width.thin;
   var highlightSizeOffset = (0, _global_styling.mathWithUnits)([highlightOffset], function (x) {
@@ -33,8 +34,11 @@ var euiCallOutStyles = exports.euiCallOutStyles = function euiCallOutStyles(euiT
   var separatorSize = (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
     return x + y;
   });
+  var highlightClipSize = (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  });
   return {
-    euiCallOut: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&::before{content:'';position:absolute;inset-block-start:-", euiTheme.border.width.thin, ";inset-inline-start:-", euiTheme.border.width.thin, ";block-size:calc(100% + ", highlightSizeOffset, ");border-inline-start:", highlightSize, " solid var(--euiCallOutTypeColor);border-start-start-radius:", borderRadius, ";border-end-start-radius:", borderRadius, ";pointer-events:none;", (0, _global_styling.preventForcedColors)(euiThemeContext), ";}&:where([data-size='s']){", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
+    euiCallOut: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&::before{content:'';position:absolute;inset-block-start:-", highlightOffset, ";inset-inline-start:-", highlightOffset, ";block-size:calc(100% + ", highlightSizeOffset, ");inline-size:100%;border-radius:", borderRadius, ";border-inline-start:", highlightSize, " solid var(--euiCallOutTypeColor);clip-path:polygon(\n          0 0,\n          ", highlightClipSize, " 0,\n          ", highlightClipSize, " 100%,\n          0 100%\n        );pointer-events:none;", (0, _global_styling.preventForcedColors)(euiThemeContext), ";}[dir='rtl'] &::before{clip-path:polygon(\n          calc(100% - ", highlightClipSize, ") 0,\n          100% 0,\n          100% 100%,\n          calc(100% - ", highlightClipSize, ") 100%\n        );}&:where([data-size='s']){", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
     // handles content + actions layout
     wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";}&:where([data-layout='wide'] &){flex-direction:row;gap:", euiTheme.size.xxl, ";};label:wrapper;"),
     // handles icon + text layout

package/test-env/components/card/card.js

@@ -270,7 +270,7 @@ var EuiCard = exports.EuiCard = function EuiCard(_ref) {
     onClick: isClickable ? outerOnClick : undefined,
     color: isDisabled ? 'subdued' : display,
     hasShadow: isDisabled || display ? false : true,
-    hasBorder: display ? false : undefined,
+    hasBorder: false,
     paddingSize: paddingSize
   }, rest), (0, _react2.jsx)("div", {
     className: "euiCard__main",

package/test-env/components/card/card.styles.js

@@ -103,8 +103,8 @@ var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeConte
       disabled: _ref2
     },
     image: {
-      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), " ", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), " ", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
-      transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
+      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), " ", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), " ", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.panel, ")")), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', "calc(".concat(euiTheme.border.radius.panel, ")")), ";img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+      transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.panel, ";;label:transparent;")
     },
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),

package/test-env/components/code/code.styles.js

@@ -31,7 +31,7 @@ var euiCodeStyles = exports.euiCodeStyles = function euiCodeStyles(euiThemeConte
      */
     euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.logicalShorthandCSS)('padding', '0.2em 0.5em'), "background-color:", codeSyntaxVariables.inlineBackgroundColor, ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
       forced: "\n          border: ".concat(euiTheme.border.thin, ";\n        ")
-    }), " border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
+    }), " border-radius:", euiTheme.border.radius.inline, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
     transparentBackground: _ref
   };
 };

package/test-env/components/code/code_block.styles.js

@@ -39,7 +39,7 @@ var euiCodeBlockStyles = exports.euiCodeBlockStyles = function euiCodeBlockStyle
   var codeSyntaxVariables = (0, _code_syntax.euiCodeSyntaxVariables)(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;border-radius:", euiTheme.border.radius.control, ";background:", codeSyntaxVariables.backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: "border: ".concat(euiTheme.border.thin, ";"),
       // Fix scrolling text occluding the border in Windows high contrast mode
       forced: 'overflow: hidden;'

package/test-env/components/color_picker/color_picker_swatch.styles.js

@@ -26,9 +26,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiColorPickerSwatchStyles = exports.euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiColorPickerSwatch: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
-      return x / 2;
-    }), ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    euiColorPickerSwatch: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " border-radius:", euiTheme.border.radius.inline, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid\n            ").concat(euiTheme.colors.borderBaseFormsColorSwatch, ";\n          box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n            ").concat((0, _services.transparentize)(euiTheme.colors.emptyShade, 0.05), ";\n        "),
       preferred: "border: ".concat(euiTheme.border.thin, ";"),
       forced: (0, _high_contrast.preventForcedColors)(euiThemeContext)

package/test-env/components/color_picker/saturation.styles.js

@@ -18,7 +18,7 @@ var _high_contrast = require("../../global_styling/functions/high_contrast");
 var euiSaturationStyles = exports.euiSaturationStyles = function euiSaturationStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var indicatorSize = euiTheme.size.m;
-  var borderRadius = euiTheme.border.radius.small;
+  var borderRadius = euiTheme.border.radius.control;
   // Without this slight decrease in border radius, the color can be seen
   // peeking through the top left corner of the saturation gradient
   var gradientBorderRadius = (0, _global_styling.mathWithUnits)(borderRadius, function (x) {

package/test-env/components/comment_list/comment_event.js

@@ -63,7 +63,9 @@ var EuiCommentEvent = exports.EuiCommentEvent = function EuiCommentEvent(_ref) {
       color: type === 'custom' ? 'transparent' : eventColor,
       paddingSize: type === 'custom' ? 'none' : 's',
       borderRadius: type === 'regular' ? 'none' : 'm',
-      hasShadow: false // `plain` color needs this
+      hasShadow: false,
+      // `plain` color needs this
+      hasBorder: false
     };
   }, [type, eventColor]);
   var isFigure = isTypeRegular;

package/test-env/components/comment_list/comment_event.styles.js

@@ -26,7 +26,7 @@ var euiCommentEventStyles = exports.euiCommentEventStyles = function euiCommentE
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCommentEvent: _ref2,
-    border: /*#__PURE__*/(0, _react.css)("border-width:", euiTheme.border.width.thin, ";border-style:solid;border-radius:", euiTheme.border.radius.medium, ";;label:border;")
+    border: /*#__PURE__*/(0, _react.css)("border-width:", euiTheme.border.width.thin, ";border-style:solid;border-radius:", euiTheme.border.radius.panel, ";;label:border;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {

package/test-env/components/context_menu/context_menu.styles.js

@@ -27,7 +27,7 @@ var euiContextMenuStyles = exports.euiContextMenuStyles = function euiContextMen
   var _euiContextMenuVariab = euiContextMenuVariables(euiThemeContext),
     panelWidth = _euiContextMenuVariab.panelWidth;
   return {
-    euiContextMenu: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', panelWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", _global_styling.euiCanAnimate, "{transition:height ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiContextMenu;"),
+    euiContextMenu: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', panelWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.panel, ";", _global_styling.euiCanAnimate, "{transition:height ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiContextMenu;"),
     fixedHeight: /*#__PURE__*/(0, _react.css)(".euiContextMenuPanel{display:flex;flex-direction:column;", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiContextMenuPanel__list{display:block;flex:1 1 0;", (0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
       hasAnimatedOverflowShadow: true
     }), ";};label:fixedHeight;")

package/test-env/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -19,7 +19,7 @@ var euiDataGridCellOutlineStyles = exports.euiDataGridCellOutlineStyles = functi
   var hoverColor = euiTheme.components.dataGridRowBorderHover;
   var markedColor = euiTheme.components.dataGridRowBorderMarked;
   var outlineWidth = euiTheme.border.width.thick;
-  var borderRadius = (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
+  var borderRadius = (0, _global_styling.mathWithUnits)(euiTheme.border.radius.inline, function (x) {
     return x / 2;
   });
 

package/test-env/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -54,10 +54,10 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
       }, (0, _react2.jsx)(_button_icon.EuiButtonIcon, {
         "aria-hidden": true,
         className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
-        color: "primary",
+        color: "text",
         css: styles.euiDataGridRowCell__actionButtonIcon,
         "data-test-subj": "euiDataGridCellExpandButton",
-        display: "fill",
+        display: "empty",
         iconSize: "s",
         iconType: "maximize",
         onClick: onExpandClick
@@ -75,8 +75,8 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         ,
         size: "xs",
         iconSize: "s",
-        display: "fill",
-        color: "primary"
+        display: "empty",
+        color: "text"
       }));
     };
     var _getVisibleCellAction = getVisibleCellActions(column === null || column === void 0 ? void 0 : column.cellActions, column === null || column === void 0 ? void 0 : column.visibleCellActions),

package/test-env/components/date_picker/react_date_picker.styles.js

@@ -78,7 +78,7 @@ var euiReactDatePickerStyles = exports.euiReactDatePickerStyles = function euiRe
     paddingSize = datePickerVars.paddingSize,
     headerOffset = datePickerVars.headerOffset;
   return {
-    euiReactDatePicker: /*#__PURE__*/(0, _css.css)("display:flex;justify-content:center;padding:", paddingSize, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";color:", euiTheme.colors.textParagraph, ";border-radius:", euiTheme.border.radius.medium, ";&.react-datepicker--non-interactive{pointer-events:none;}.react-datepicker__focusTrap{display:flex;justify-content:center;gap:", paddingSize, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{&,.react-datepicker__focusTrap{flex-direction:column;}}.react-datepicker__header__dropdown{position:absolute;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', headerOffset), " padding:", paddingSize, ";display:flex;justify-content:center;gap:", gapSize, ";}.react-datepicker__navigation{z-index:1;position:absolute;", (0, _global_styling.logicalCSS)('top', paddingSize), "&:hover,&:focus{transform:none;}}.react-datepicker__navigation--previous{", (0, _global_styling.logicalCSS)('left', paddingSize), ";}.react-datepicker__navigation--next{", (0, _global_styling.logicalCSS)('right', paddingSize), ";}.react-datepicker__month-container{flex-grow:1;", (0, _global_styling.logicalCSS)('margin-top', headerOffset), ";}.react-datepicker__time-container{flex-grow:1;", (0, _global_styling.logicalCSS)('margin-top',
+    euiReactDatePicker: /*#__PURE__*/(0, _css.css)("display:flex;justify-content:center;padding:", paddingSize, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";color:", euiTheme.colors.textParagraph, ";&.react-datepicker--non-interactive{pointer-events:none;}.react-datepicker__focusTrap{display:flex;justify-content:center;gap:", paddingSize, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{&,.react-datepicker__focusTrap{flex-direction:column;}}.react-datepicker__header__dropdown{position:absolute;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', headerOffset), " padding:", paddingSize, ";display:flex;justify-content:center;gap:", gapSize, ";}.react-datepicker__navigation{z-index:1;position:absolute;", (0, _global_styling.logicalCSS)('top', paddingSize), "&:hover,&:focus{transform:none;}}.react-datepicker__navigation--previous{", (0, _global_styling.logicalCSS)('left', paddingSize), ";}.react-datepicker__navigation--next{", (0, _global_styling.logicalCSS)('right', paddingSize), ";}.react-datepicker__month-container{flex-grow:1;", (0, _global_styling.logicalCSS)('margin-top', headerOffset), ";}.react-datepicker__time-container{flex-grow:1;", (0, _global_styling.logicalCSS)('margin-top',
     // The time select gets a little extra offset
     (0, _global_styling.mathWithUnits)([headerOffset, gapSize], function (x, y) {
       return x + y;
@@ -91,9 +91,9 @@ var _monthYearDropdowns = function _monthYearDropdowns(euiThemeContext, _ref) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return /*#__PURE__*/(0, _css.css)(".react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{display:flex;justify-content:space-between;align-items:center;", formStyles.compressed, " ", (0, _form.euiFormControlText)(euiThemeContext), " font-weight:", euiTheme.font.weight.medium, ";", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " &:hover{cursor:pointer;text-decoration:underline;}}.react-datepicker__year-dropdown-container{position:relative;flex-grow:1;}.react-datepicker__month-dropdown-container{position:relative;flex-grow:2;}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown{z-index:1;position:absolute;", (0, _global_styling.euiYScroll)(euiThemeContext, {
     height: 'auto'
-  }), " ", (0, _global_styling.logicalCSS)('max-height', '250px'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " padding:", euiTheme.size.xs, ";background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";", (0, _euiThemeCommon.euiShadowSmall)(euiThemeContext, {
+  }), " ", (0, _global_styling.logicalCSS)('max-height', '250px'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " padding:", euiTheme.size.xs, ";background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.panel, ";", (0, _euiThemeCommon.euiShadowSmall)(euiThemeContext, {
     borderAllInHighContrastMode: true
-  }), ";}.react-datepicker__year-dropdown{", (0, _global_styling.logicalCSS)('min-width', '100px'), ";}.react-datepicker__month-dropdown{", (0, _global_styling.logicalCSS)('min-width', '140px'), ";}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{display:flex;align-items:center;", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.small, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{", colors.hover, ";}&--selected_year,&--selected_month{", colors.selected, ";}&--selected{display:none;}}");
+  }), ";}.react-datepicker__year-dropdown{", (0, _global_styling.logicalCSS)('min-width', '100px'), ";}.react-datepicker__month-dropdown{", (0, _global_styling.logicalCSS)('min-width', '140px'), ";}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{display:flex;align-items:center;", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.control, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{", colors.hover, ";}&--selected_year,&--selected_month{", colors.selected, ";}&--selected{display:none;}}");
 };
 var _dayCalendarStyles = function _dayCalendarStyles(euiThemeContext, _ref2) {
   var gapSize = _ref2.gapSize,
@@ -107,7 +107,7 @@ var _dayCalendarStyles = function _dayCalendarStyles(euiThemeContext, _ref2) {
   var rangeMarginOffset = (0, _global_styling.mathWithUnits)(dayMargin, function (x) {
     return x * 1.5;
   });
-  return /*#__PURE__*/(0, _css.css)(".react-datepicker__day-names,.react-datepicker__week{display:flex;justify-content:space-between;flex-grow:1;color:", colors.day.header, ";}.react-datepicker__day-name,.react-datepicker__day{display:inline-flex;justify-content:center;align-items:center;", (0, _global_styling.logicalSizeCSS)(daySize), " margin:", dayMargin, ";font-weight:", euiTheme.font.weight.medium, ";}.react-datepicker__day{color:", colors.day.inMonth, ";border-radius:", euiTheme.border.radius.small, ";", _global_styling.euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}&:hover{", colors.hover, " text-decoration:underline;cursor:pointer;", _global_styling.euiCanAnimate, "{transform:scale(1.1);}}&--today{color:", colors.day.today, ";font-weight:", euiTheme.font.weight.bold, ";}&--outside-month{color:", colors.day.outsideMonth, ";}&--highlighted,&--highlighted:hover{", colors.highlighted, ";}&--in-range,&--in-range:hover{", colors.inRange, ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+  return /*#__PURE__*/(0, _css.css)(".react-datepicker__day-names,.react-datepicker__week{display:flex;justify-content:space-between;flex-grow:1;color:", colors.day.header, ";}.react-datepicker__day-name,.react-datepicker__day{display:inline-flex;justify-content:center;align-items:center;", (0, _global_styling.logicalSizeCSS)(daySize), " margin:", dayMargin, ";font-weight:", euiTheme.font.weight.medium, ";}.react-datepicker__day{color:", colors.day.inMonth, ";border-radius:", euiTheme.border.radius.control, ";", _global_styling.euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}&:hover{", colors.hover, " text-decoration:underline;cursor:pointer;", _global_styling.euiCanAnimate, "{transform:scale(1.1);}}&--today{color:", colors.day.today, ";font-weight:", euiTheme.font.weight.bold, ";}&--outside-month{color:", colors.day.outsideMonth, ";}&--highlighted,&--highlighted:hover{", colors.highlighted, ";}&--in-range,&--in-range:hover{", colors.inRange, ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
     // Ranges use 2 side box-shadows that are the same as the button
     // background to fill the gap between margins
     none: "\n          &--in-range:not(&--selected):not(:hover):not(&--disabled) {\n            box-shadow: -".concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ",\n              ").concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ";\n            border-radius: 0;\n\n            &:first-child {\n              box-shadow: ").concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ";\n            }\n\n            &:last-child {\n              box-shadow: -").concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ";\n            }\n          }\n          /* Animate smoothly on hover */\n          &--in-range:not(&--selected) {\n            ").concat(_global_styling.euiCanAnimate, " {\n              transition: transform ").concat(animationSpeed, " ease-in-out,\n                box-shadow ").concat(animationSpeed, " ease-in-out,\n                border-radius ").concat(animationSpeed, " ease-in-out,\n                background-color ").concat(animationSpeed, " ease-in;\n            }\n          }\n        "),
@@ -124,9 +124,9 @@ var _timeSelectStyles = function _timeSelectStyles(euiThemeContext, _ref3) {
     colors = _ref3.colors,
     animationSpeed = _ref3.animationSpeed;
   var euiTheme = euiThemeContext.euiTheme;
-  return /*#__PURE__*/(0, _css.css)(".react-datepicker__time-container{display:flex;", (0, _global_styling.logicalCSS)('width', 'auto'), " background-color:", euiTheme.colors.body, ";border-radius:", euiTheme.border.radius.medium, ";&--focus{.react-datepicker__time-list-item--preselected{text-decoration:underline;}}}.react-datepicker__time,.react-datepicker__time-box{display:flex;flex-direction:column;flex-grow:1;}.react-datepicker__time-list{", (0, _global_styling.euiYScroll)(euiThemeContext, {
+  return /*#__PURE__*/(0, _css.css)(".react-datepicker__time-container{display:flex;", (0, _global_styling.logicalCSS)('width', 'auto'), " background-color:", euiTheme.colors.backgroundBaseSubdued, ";border-radius:", euiTheme.border.radius.control, ";&--focus{.react-datepicker__time-list-item--preselected{text-decoration:underline;}}}.react-datepicker__time,.react-datepicker__time-box{display:flex;flex-direction:column;flex-grow:1;}.react-datepicker__time-list{", (0, _global_styling.euiYScroll)(euiThemeContext, {
     height: '100px'
-  }), " display:flex;flex-direction:column;flex-grow:1;align-items:center;gap:", gapSize, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), " &:focus-visible{outline-style:auto;}}.react-datepicker__time-list-item{display:flex;justify-content:align-center;align-items:center;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;border-radius:", euiTheme.border.radius.small, ";&:not(:disabled):hover{text-decoration:underline;cursor:pointer;}&--disabled{cursor:not-allowed;color:", colors.disabled.color, ";}&--injected{", colors.highlighted, ";}&--selected{", colors.selected, ";}&--preselected{", colors.hover, " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+  }), " display:flex;flex-direction:column;flex-grow:1;align-items:center;gap:", gapSize, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), " &:focus-visible{outline-style:auto;}}.react-datepicker__time-list-item{display:flex;justify-content:align-center;align-items:center;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;border-radius:", euiTheme.border.radius.control, ";&:not(:disabled):hover{text-decoration:underline;cursor:pointer;}&--disabled{cursor:not-allowed;color:", colors.disabled.color, ";}&--injected{", colors.highlighted, ";}&--selected{", colors.selected, ";}&--preselected{", colors.hover, " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
     // Use negative margins to offset the added border width
     forced: "\n            border: ".concat(euiTheme.border.thin, ";\n            margin-inline: -").concat(euiTheme.border.width.thin, ";\n          ")
   }), ";}", _global_styling.euiCanAnimate, "{transition:background-color ", animationSpeed, " ease-in;}}&.react-datepicker--time-only{padding:0;.react-datepicker__time-container{background-color:transparent;margin:0;}.react-datepicker__time-list{", (0, _global_styling.logicalCSS)('height', '204px'), ";}.react-datepicker__time-list-item{", (0, _global_styling.logicalCSS)('min-width', '112px'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";text-align:start;}}");

package/test-env/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -73,7 +73,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
       euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
         none: "\n              box-shadow: none;\n            ",
         preferred: 'border: none;'
-      }), ".euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover{outline:none;}.euiPopover{border-radius:", forms.controlBorderRadius, ";}.euiDatePopoverButton{background-color:transparent;border-radius:inherit;}};label:euiSuperDatePicker__formControlLayout;"),
+      }), ".euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover{outline:none;}.euiPopover{border-radius:", forms.controlBorderRadius, ";.euiToolTipAnchor{border-radius:inherit;}}.euiDatePopoverButton{background-color:transparent;border-radius:inherit;}};label:euiSuperDatePicker__formControlLayout;"),
       default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
       invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";&:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:transparent;--euiFormControlStateHoverColor:transparent;}&:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)){", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";}};label:invalid;"),

package/test-env/components/description_list/description_list_description.js

@@ -37,7 +37,7 @@ var EuiDescriptionListDescription = exports.EuiDescriptionListDescription = func
     compressed = _useContext.compressed,
     align = _useContext.align;
   var styles = (0, _services.useEuiMemoizedStyles)(_description_list_description.euiDescriptionListDescriptionStyles);
-  var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+  var conditionalStyles = compressed ? [textStyle === 'reverse' ? styles.fontStyles.compressed : styles.fontStyles.compressedNormal] : [styles.fontStyles[textStyle]];
   switch (type) {
     case 'inline':
       conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal];

package/test-env/components/description_list/description_list_description.styles.js

@@ -33,7 +33,8 @@ var euiDescriptionListDescriptionStyles = exports.euiDescriptionListDescriptionS
     fontStyles: {
       normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;"),
       reverse: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";;label:reverse;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";;label:compressed;")
+      compressed: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";;label:compressed;"),
+      compressedNormal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:compressedNormal;")
     },
     // Nested inline styles for type and font
     inlineStyles: {

package/test-env/components/description_list/description_list_title.js

@@ -38,7 +38,10 @@ var EuiDescriptionListTitle = exports.EuiDescriptionListTitle = function EuiDesc
     align = _useContext.align,
     rowGutterSize = _useContext.rowGutterSize;
   var styles = (0, _services.useEuiMemoizedStyles)(_description_list_title.euiDescriptionListTitleStyles);
-  var conditionalStyles = compressed && textStyle !== 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+
+  // normal is title-styled, so its compressed size lives in fontStyles;
+  // reverse is text-styled, so it uses a padding-free compressed size
+  var conditionalStyles = compressed ? [textStyle !== 'reverse' ? styles.fontStyles.compressed : styles.fontStyles.compressedReverse] : [styles.fontStyles[textStyle]];
   switch (type) {
     case 'inline':
       conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal];

package/test-env/components/description_list/description_list_title.styles.js

@@ -23,12 +23,14 @@ var euiDescriptionListTitleStyles = exports.euiDescriptionListTitleStyles = func
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(";label:column;"),
-    inline: /*#__PURE__*/(0, _react.css)("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade, ";", (0, _global_styling.logicalCSS)('margin-vertical', '0'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.xs), " ", colorMode === 'DARK' && "color: ".concat(euiTheme.colors.textHeading, ";"), "&:first-of-type{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";};label:inline;"),
+    inline: /*#__PURE__*/(0, _react.css)("display:inline;border-radius:", euiTheme.border.radius.inline, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade, ";", (0, _global_styling.logicalCSS)('margin-vertical', '0'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.xs), " ", colorMode === 'DARK' && "color: ".concat(euiTheme.colors.textHeading, ";"), "&:first-of-type{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";};label:inline;"),
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {
       normal: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";;label:normal;"),
       reverse: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:reverse;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";;label:compressed;")
+      compressed: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";;label:compressed;"),
+      // reverse's compressed size, without the inline type's pill padding
+      compressedReverse: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:compressedReverse;")
     },
     // Inline types
     inlineStyles: {

package/test-env/components/drag_and_drop/draggable.js

@@ -54,6 +54,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
   var _useContext = (0, _react.useContext)(_droppable.EuiDroppableContext),
     cloneItems = _useContext.cloneItems;
   var styles = (0, _services.useEuiMemoizedStyles)(_draggable.euiDraggableStyles);
+  var itemStyles = (0, _services.useEuiMemoizedStyles)(_draggable.euiDraggableItemStyles);
   var hasCustomDragHandle = customDragHandle !== false;
   return (0, _react2.jsx)(_dnd.Draggable, (0, _extends2.default)({
     draggableId: draggableId,
@@ -89,7 +90,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
       tabIndex: hasInteractiveChildren || isFullyCustomDragHandle ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
     }), (0, _services.cloneElementWithCss)(DraggableElement, {
       className: (0, _classnames.default)(DraggableElement.props.className, childClasses),
-      css: [_draggable.euiDraggableItemStyles.euiDraggable__item, isDragDisabled && _draggable.euiDraggableItemStyles.disabled]
+      css: [itemStyles.euiDraggable__item, isDragDisabled && itemStyles.disabled, isDragging && itemStyles.isDragging]
     })), cloneItems && isDragging && (0, _react2.jsx)("div", {
       className: (0, _classnames.default)(classes, 'euiDraggable--clone'),
       css: cssStyles

package/test-env/components/drag_and_drop/draggable.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiDraggableStyles = exports.euiDraggableItemStyles = void 0;
 var _react = require("@emotion/react");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _droppable = require("./droppable.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
@@ -13,7 +14,7 @@ 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 _ref = process.env.NODE_ENV === "production" ? {
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "1nohugb-isRemovable",
   styles: "transition-duration:0.001s!important;label:isRemovable;"
 } : {
@@ -21,7 +22,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "transition-duration:0.001s!important;label:isRemovable;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "1wvdf2m-hasClone",
   styles: "transform:none!important;label:hasClone;"
 } : {
@@ -29,7 +30,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "transform:none!important;label:hasClone;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "oyhf1i-euiDraggable",
   styles: "&:focus{outline:none;&>.euiDraggable__item{outline:auto;}};label:euiDraggable;"
 } : {
@@ -40,21 +41,25 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiDraggableStyles = exports.euiDraggableStyles = function euiDraggableStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiDraggable: _ref3,
+    euiDraggable: _ref4,
     isDragging: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.toast, "!important;;label:isDragging;"),
-    hasClone: _ref2,
-    isRemovable: _ref,
+    hasClone: _ref3,
+    isRemovable: _ref2,
     spacing: (0, _droppable.sharedSpacingPadding)(euiThemeContext)
   };
 };
-var euiDraggableItemStyles = exports.euiDraggableItemStyles = {
-  euiDraggable__item: /*#__PURE__*/(0, _react.css)(";label:euiDraggable__item;"),
-  disabled: process.env.NODE_ENV === "production" ? {
-    name: "b86pnw-disabled",
-    styles: "cursor:not-allowed;label:disabled;"
-  } : {
-    name: "b86pnw-disabled",
-    styles: "cursor:not-allowed;label:disabled;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;"
+} : {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiDraggableItemStyles = exports.euiDraggableItemStyles = function euiDraggableItemStyles(euiThemeContext) {
+  return {
+    euiDraggable__item: /*#__PURE__*/(0, _react.css)(";label:euiDraggable__item;"),
+    disabled: _ref,
+    isDragging: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), ";;label:isDragging;")
+  };
 };

package/test-env/components/empty_prompt/empty_prompt.js

@@ -49,11 +49,12 @@ var EuiEmptyPrompt = exports.EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
     className = _ref.className,
     _ref$layout = _ref.layout,
     layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
-    hasBorder = _ref.hasBorder,
+    _hasBorder = _ref.hasBorder,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'transparent' : _ref$color,
     footer = _ref.footer,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasBorder = _hasBorder !== null && _hasBorder !== void 0 ? _hasBorder : color === 'plain';
   var classes = (0, _classnames.default)('euiEmptyPrompt', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_empty_prompt.euiEmptyPromptStyles);
   var cssStyles = [styles.euiEmptyPrompt, styles[layout]];
@@ -133,13 +134,15 @@ EuiEmptyPrompt.propTypes = {
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
   /**
-     * Adds a medium shadow to the panel;
-     * Only works when `color="plain"`
+     * Adds a medium shadow to the panel.
+     * Only applies when `color="plain"` and `hasBorder={false}`.
+     * @default false
      */
   hasShadow: _propTypes.default.bool,
   /**
      * Adds a slight 1px border on all edges.
-     * Only works when `color="plain | transparent"`
+     * Only applies when `color="plain | transparent"`.
+     * @default true
      */
   hasBorder: _propTypes.default.bool,
   /**

package/test-env/components/facet/facet_button.styles.js

@@ -17,7 +17,7 @@ var euiFacetButtonStyles = exports.euiFacetButtonStyles = function euiFacetButto
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " &:not(:disabled){&:hover,&:focus{text-decoration:none;.euiFacetButton__text{text-decoration:underline;}}&:focus .euiFacetButton__text{text-decoration-thickness:", euiTheme.border.width.thick, ";}}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;};label:euiFacetButton;")
+    euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " &:not(:disabled){&:hover,&:focus{text-decoration:none;.euiFacetButton__text{text-decoration:underline;}}&:focus .euiFacetButton__text{text-decoration-thickness:", euiTheme.border.width.thick, ";}}&:disabled{color:", euiTheme.colors.textDisabled, ";pointer-events:none;};label:euiFacetButton;")
   };
 };
 var euiFacetButtonTextStyles = exports.euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref2) {

package/test-env/components/filter_group/filter_button.styles.js

@@ -46,7 +46,7 @@ var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterBu
   var withNextSelector = '& + .euiFilterButton__wrapper';
   var containerPadding = euiTheme.size.xs;
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)("--euiFilterButtonInsetSize:", buttonSizeMap.m.getInsetHeight(buttonSizeMap.m.height, containerPadding), ";--euiFilterButtonRadius:", buttonSizeMap.m.radiusInset, ";position:relative;block-size:var(--euiFilterButtonInsetSize);", (0, _global_styling.logicalCSS)('width', '100%'), " border:none;border-radius:var(\n        --euiFilterButtonRadius,\n        ", euiTheme.border.radius.small, "\n      );&:not(", selectedSelector, "){&:hover,&:active{.euiFilterButton__notification[class*='subdued']{background-color:", euiTheme.components.filterButtonBadgeBackgroundHover, ";}}}&&:focus-visible{outline-style:auto;outline-offset:0;};label:euiFilterButton;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)("--euiFilterButtonInsetSize:", buttonSizeMap.m.getInsetHeight(buttonSizeMap.m.height, containerPadding), ";--euiFilterButtonRadius:", buttonSizeMap.m.radiusInset, ";position:relative;block-size:var(--euiFilterButtonInsetSize);", (0, _global_styling.logicalCSS)('width', '100%'), " border:none;border-radius:var(\n        --euiFilterButtonRadius,\n        ", euiTheme.border.radius.control, "\n      );&:not(", selectedSelector, "){&:hover,&:active{.euiFilterButton__notification[class*='subdued']{background-color:", euiTheme.components.filterButtonBadgeBackgroundHover, ";}}}&&:focus-visible{outline-style:auto;outline-offset:0;};label:euiFilterButton;"),
     buttonType: {
       toggle: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " &:where(:is(", _global_styling.euiDisabledSelector, "):not([aria-pressed=\"true\"])){background-color:transparent;}", (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          ")

package/test-env/components/flyout/flyout_body.styles.js

@@ -25,6 +25,6 @@ var euiFlyoutBodyStyles = exports.euiFlyoutBodyStyles = function euiFlyoutBodySt
         side: 'end'
       }), ";;label:hasBanner;")
     },
-    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)("overflow:hidden;.euiCallOut{", (0, _global_styling.logicalCSS)('margin-top', "".concat(euiTheme.size.s)), " ", (0, _global_styling.logicalCSS)('margin-left', "".concat(euiTheme.size.l)), " ", (0, _global_styling.logicalCSS)('margin-right', "".concat(euiTheme.size.l)), ";}.euiFlyout:not(:has(.euiFlyoutHeader)) &{.euiCallOut{", (0, _global_styling.logicalCSS)('margin-right', "".concat(euiTheme.size.xxl)), ";}};label:euiFlyoutBody__banner;")
+    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', 'var(--euiFlyoutBodyPadding, 0)'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', 'var(--euiFlyoutBodyPadding, 0)'), " .euiFlyout:not(:has(.euiFlyoutHeader, .euiFlyoutMenu)) &{", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxl), ";};label:euiFlyoutBody__banner;")
   };
 };

package/test-env/components/form/checkbox/checkbox.styles.js

@@ -29,7 +29,7 @@ var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(e
   return {
     euiCheckbox: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiCheckbox;"),
     input: {
-      euiCheckbox__square: /*#__PURE__*/(0, _react.css)("position:relative;", controlStyles.input.focusVisible, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      euiCheckbox__square: /*#__PURE__*/(0, _react.css)("position:relative;", controlStyles.input.focusVisible, " border-radius:", euiTheme.border.radius.inline, ";;label:euiCheckbox__square;"),
       hasLabel: controlStyles.input.hasLabel,
       // Skip css`` className generation
       // Readonly checkboxes are used by EuiMarkdownEditor

package/test-env/components/form/checkbox/checkbox_control.styles.js

@@ -25,7 +25,7 @@ var euiCheckboxControlStyles = exports.euiCheckboxControlStyles = function euiCh
   var euiTheme = euiThemeContext.euiTheme;
   var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
   return {
-    euiCheckboxControl: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckboxControl;"),
+    euiCheckboxControl: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.inline, ";;label:euiCheckboxControl;"),
     enabled: {
       selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
       unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;"),

package/test-env/components/form/form.styles.js

@@ -41,8 +41,8 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlCompressedHeight: controlCompressedHeight,
     controlPadding: euiTheme.size.m,
     controlCompressedPadding: euiTheme.size.s,
-    controlBorderRadius: euiTheme.border.radius.small,
-    controlCompressedBorderRadius: euiTheme.border.radius.small,
+    controlBorderRadius: euiTheme.border.radius.control,
+    controlCompressedBorderRadius: euiTheme.border.radius.control,
     iconAffordance: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 1.5;
     }),
@@ -80,10 +80,10 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlLayoutGroupInputCompressedHeight: (0, _global_styling.mathWithUnits)(controlCompressedHeight, function (x) {
       return x - 2;
     }),
-    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small,
-    controlLayoutBorderRadius: euiTheme.border.radius.small,
-    controlLayoutInnerBorderRadius: (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
-      return x / 2;
+    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.control,
+    controlLayoutBorderRadius: euiTheme.border.radius.control,
+    controlLayoutInnerBorderRadius: (0, _global_styling.mathWithUnits)([euiTheme.border.radius.control, euiTheme.size.xxs], function (x, y) {
+      return x - y;
     })
   };
   var iconSizes = {

package/test-env/components/form/form_control_layout/form_control_layout.js

@@ -67,7 +67,7 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     'euiFormControlLayout-readOnly': readOnly
   }, className);
   var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout.euiFormControlLayoutStyles);
-  var cssStyles = [styles.euiFormControlLayout, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth].concat((0, _toConsumableArray2.default)(isGroup ? [styles.group.group, compressed ? styles.group.compressed : styles.group.uncompressed] : []));
+  var cssStyles = [styles.euiFormControlLayout, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth].concat((0, _toConsumableArray2.default)(isGroup ? [styles.group.group, compressed ? styles.group.compressed : styles.group.uncompressed, (isDisabled || readOnly) && styles.group.disabled] : []));
   var childrenWrapperStyles = [styles.children.euiFormControlLayout__childrenWrapper, isGroup && styles.children.inGroup, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var hasDropdownIcon = !readOnly && !isDisabled && isDropdown;
   var hasRightIcon = (0, _num_icons.isRightSideIcon)(icon);

package/test-env/components/form/form_control_layout/form_control_layout.styles.js

@@ -50,7 +50,8 @@ var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function e
       group: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;align-items:stretch;border:none;background-color:", form.backgroundColor, ";overflow:hidden;&::after{content:'';position:absolute;inset:0;z-index:0;border:", euiTheme.border.width.thin, " solid ", form.borderColor, ";border-radius:inherit;pointer-events:none;}&:where(:not(:has(*:is(", _global_styling.euiDisabledSelector, "), [readOnly])):hover){&::after{border:", highContrastMode ? euiTheme.border.width.thick : euiTheme.border.width.thin, " solid ", highContrastMode ? form.borderColor : form.borderHovered, ";}}&:has(:autofill){background:", form.backgroundAutoFilled, ";&:not(:hover)::after{border-color:", form.borderAutofilled, ";}*:-webkit-autofill,*:autofill{--euiFormControlStateAutofillColor:", form.backgroundAutoFilled, ";background-clip:content-box;&:hover,&:focus{--euiFormControlStateAutofillColor:", form.backgroundAutoFilled, ";}}}.euiFilterGroup{border-radius:0;", (0, _global_styling.logicalCSS)('padding-right', euiTheme.border.width.thin), " &::after{display:none;}}.euiFilterButton__wrapper:first-of-type::before,.euiFilterButton__wrapper::after{display:none;}>*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
       // Skipping css`` to avoid repeated compressed/uncompressed classNames
       uncompressed: "\n        border-radius: ".concat(form.controlBorderRadius, ";\n      "),
-      compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      ")
+      compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      "),
+      disabled: /*#__PURE__*/(0, _react.css)("background-color:", form.backgroundDisabledColor, ";;label:disabled;")
     },
     children: {
       euiFormControlLayout__childrenWrapper: _ref,