@elastic/eui 122.0.0 → 122.1.0

package/lib/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/lib/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/lib/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/lib/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -59,10 +59,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
@@ -80,8 +80,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/lib/components/date_picker/react_date_picker.styles.js

@@ -80,7 +80,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;
@@ -93,9 +93,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,
@@ -109,7 +109,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        "),
@@ -126,9 +126,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/lib/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/lib/components/description_list/description_list_description.js

@@ -43,7 +43,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/lib/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/lib/components/description_list/description_list_title.js

@@ -44,7 +44,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/lib/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/lib/components/drag_and_drop/draggable.js

@@ -57,6 +57,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, _extends({
     draggableId: draggableId,
@@ -92,7 +93,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/lib/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/lib/components/empty_prompt/empty_prompt.js

@@ -50,11 +50,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 = _objectWithoutProperties(_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]];
@@ -134,13 +135,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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/form/form.styles.js

@@ -43,8 +43,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;
     }),
@@ -82,10 +82,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/lib/components/form/form_control_layout/form_control_layout.js

@@ -75,7 +75,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(_toConsumableArray(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(_toConsumableArray(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/lib/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,

package/lib/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -17,7 +17,7 @@ var _form = require("../form.styles");
 
 var euiFormControlLayoutDelimitedStyles = exports.euiFormControlLayoutDelimitedStyles = function euiFormControlLayoutDelimitedStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var delimitedStyles = "\n      border-radius: ".concat(euiTheme.border.radius.small, ";\n    ").trim();
+  var delimitedStyles = "\n      border-radius: ".concat(euiTheme.border.radius.control, ";\n    ").trim();
   return {
     // Appended onto existing `euiFormControlLayout` styles
     delimited: /*#__PURE__*/(0, _react.css)(delimitedStyles, ";label:delimited;"),

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

@@ -41,7 +41,7 @@ var euiRangeVariables = exports.euiRangeVariables = function euiRangeVariables(e
     get trackBorderColor() {
       return this.trackColor;
     },
-    trackBorderRadius: euiTheme.border.radius.medium,
+    trackBorderRadius: euiTheme.border.radius.inline,
     tickHeight: trackHeight,
     tickWidth: euiTheme.size.xs,
     tickColor: highContrastMode ? euiTheme.colors.darkShade : euiTheme.colors.lightShade,

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

@@ -21,7 +21,7 @@ var tickStyles = function tickStyles(euiThemeContext, range) {
     none: "\n        inline-size: ".concat(range.tickWidth, ";\n        background-color: ").concat(range.tickColor, ";\n      "),
     // Windows high contrast themes ignore background color but render borders
     forced: (0, _global_styling.logicalCSS)('border-left', "".concat(range.tickWidth, " solid ").concat(range.tickColor))
-  }), "\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n  ");
+  }), "\n    border-radius: ").concat(euiTheme.border.radius.inline, ";\n  ");
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "1sbhdc4-euiRangeTicks",

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

@@ -38,7 +38,7 @@ var euiRangeTooltipValueStyles = exports.euiRangeTooltipValueStyles = function e
   return {
     euiRangeTooltip__value: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:50%;max-inline-size:", (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 16;
-    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " color:", euiTheme.colors.textGhost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " color:", euiTheme.colors.textGhost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.control, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
       return x / -2;
     }), ";background-color:inherit;border:inherit;};label:euiRangeTooltip__value;"),
     left: /*#__PURE__*/(0, _react.css)("margin-inline-end:", arrowOffset, ";&::before{", arrowStyles.positions.left, " inset-inline-start:100%;};label:left;"),

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

@@ -20,6 +20,6 @@ var euiHeaderLogoStyles = exports.euiHeaderLogoStyles = function euiHeaderLogoSt
   var _euiHeaderVariables = (0, _header.euiHeaderVariables)(euiThemeContext),
     childHeight = _euiHeaderVariables.childHeight;
   return {
-    euiHeaderLogo: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', childHeight), " line-height:", childHeight, ";", (0, _global_styling.logicalCSS)('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;border-radius:", euiTheme.border.radius.small, ";align-items:center;white-space:nowrap;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;")
+    euiHeaderLogo: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', childHeight), " line-height:", childHeight, ";", (0, _global_styling.logicalCSS)('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;border-radius:", euiTheme.border.radius.control, ";align-items:center;white-space:nowrap;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;")
   };
 };

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

@@ -34,17 +34,11 @@ var EuiIconTableSparkles = function EuiIconTableSparkles(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M14.5 13a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 0 1H15v.5a.5.5 0 0 1-1 0V15h-.5a.5.5 0 0 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5"
-  }), (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M14 1a1 1 0 0 1 1 1v4.086a1.5 1.5 0 0 0-1 0V5H2v9h7.912q.057.159.077.331l.012.219q0 .023.004.047l.01.1q.004.053.015.104.022.102.057.199H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 4h12V2H2z",
-    clipRule: "evenodd"
-  }), (0, _react2.jsx)("path", {
     fillRule: "evenodd",
-    d: "M11.5 8a.5.5 0 0 1 .5.5 2.5 2.5 0 0 0 2 2.45v-.007q.174.037.356.05.071.006.144.007a.5.5 0 0 1 0 1q-.072 0-.144.007-.182.011-.356.048v-.005c-.98.199-1.751.97-1.95 1.95h.006a2.5 2.5 0 0 0-.056.5l-.01.1a.5.5 0 0 1-.98 0l-.01-.1-.013-.256a2.5 2.5 0 0 0-.221-.797l-.03-.065a3 3 0 0 0-.09-.161l-.015-.026-.08-.12-.049-.07-.085-.107-.042-.05-.1-.105-.052-.053-.096-.085q-.036-.032-.072-.061a2.6 2.6 0 0 0-.57-.34q-.048-.021-.098-.04-.05-.02-.1-.035l-.117-.037-.117-.029-.091-.02a3 3 0 0 0-.205-.03l-.019-.002A3 3 0 0 0 8.5 12a.5.5 0 0 1 0-1A2.5 2.5 0 0 0 11 8.5a.5.5 0 0 1 .5-.5m0 2.302c-.295.49-.707.903-1.198 1.198.49.295.903.707 1.198 1.197.295-.49.707-.902 1.197-1.197a3.5 3.5 0 0 1-1.197-1.198",
+    d: "M13.995.95a1 1 0 0 1 1 1V10c-.156-.055-.509-.239-.688-.475a1.8 1.8 0 0 1-.316-.599l.004-3.977h-12v9h7.75c.037.106.101.395.128.528.027.132.047.355.047.472H1.995a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1zm-12 3h12v-2h-12z",
     clipRule: "evenodd"
   }), (0, _react2.jsx)("path", {
-    d: "M5 13H3v-1h2zm0-3H3V9h2zm3 0H6V9h2zm6.5-3a.5.5 0 0 1 .5.5V8h.5a.5.5 0 0 1 0 1H15v.5a.5.5 0 0 1-1 0V9h-.5a.5.5 0 0 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5M5 7H3V6h2zm3 0H6V6h2zm5 0H9V6h4z"
+    d: "M5 13H3v-1h2zm0-3H3V9h2zm3 0H6V9h2zM5 7H3V6h2zm3 0H6V6h2zm5 0H9V6h4zm-.5 1.501v.02l.005.093a3.8 3.8 0 0 0 .379 1.411c.19.379.466.742.87 1.011.402.268.96.463 1.747.463a.5.5 0 0 1 0 1c-.788 0-1.345.196-1.746.463-.405.27-.682.633-.87 1.012a3.8 3.8 0 0 0-.384 1.504l-.001.02v.002l-.01.1a.5.5 0 0 1-.98 0l-.01-.1v-.022l-.005-.093a4 4 0 0 0-.043-.35 3.8 3.8 0 0 0-.337-1.061 2.6 2.6 0 0 0-.87-1.012c-.4-.267-.958-.463-1.745-.463a.5.5 0 1 1 0-1c.787 0 1.344-.195 1.746-.463.404-.27.68-.632.869-1.01.19-.38.287-.767.337-1.062a4 4 0 0 0 .048-.442v-.023a.5.5 0 0 1 1 0zm-.5 1.99a3.56 3.56 0 0 1-1.2 1.377q-.102.07-.214.131.111.063.214.131c.573.382.951.887 1.2 1.378a3.57 3.57 0 0 1 1.413-1.509A3.57 3.57 0 0 1 12 10.49"
   }));
 };
 var icon = exports.icon = EuiIconTableSparkles;

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

@@ -67,7 +67,7 @@ var euiIconStyles = exports.euiIconStyles = function euiIconStyles(_ref3) {
     app: /*#__PURE__*/(0, _react.css)("fill:", euiTheme.colors.textParagraph, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.primary, ";};label:app;"),
     logo: /*#__PURE__*/(0, _react.css)(";label:logo;"),
     // Loading states
-    isLoading: /*#__PURE__*/(0, _react.css)("opacity:", iconLoadingOpacity, ";background-color:currentColor;border-radius:", euiTheme.border.radius.small, ";;label:isLoading;"),
+    isLoading: /*#__PURE__*/(0, _react.css)("opacity:", iconLoadingOpacity, ";background-color:currentColor;border-radius:", euiTheme.border.radius.inline, ";;label:isLoading;"),
     isLoaded: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", iconLoading, " ", euiTheme.animation.normal, " ease-in 0s 1 forwards;};label:isLoaded;")
   };
 };

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

@@ -1,6 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M14.5 13a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 0 1H15v.5a.5.5 0 0 1-1 0V15h-.5a.5.5 0 0 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5"/>
-  <path fill-rule="evenodd" d="M14 1a1 1 0 0 1 1 1v4.086a1.5 1.5 0 0 0-1 0V5H2v9h7.912q.057.159.077.331l.012.219q0 .023.004.047l.01.1q.004.053.015.104.022.102.057.199H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 4h12V2H2z" clip-rule="evenodd"/>
-  <path fill-rule="evenodd" d="M11.5 8a.5.5 0 0 1 .5.5 2.5 2.5 0 0 0 2 2.45v-.007q.174.037.356.05.071.006.144.007a.5.5 0 0 1 0 1q-.072 0-.144.007-.182.011-.356.048v-.005c-.98.199-1.751.97-1.95 1.95h.006a2.5 2.5 0 0 0-.056.5l-.01.1a.5.5 0 0 1-.98 0l-.01-.1-.013-.256a2.5 2.5 0 0 0-.221-.797l-.03-.065a3 3 0 0 0-.09-.161l-.015-.026-.08-.12-.049-.07-.085-.107-.042-.05-.1-.105-.052-.053-.096-.085q-.036-.032-.072-.061a2.6 2.6 0 0 0-.57-.34q-.048-.021-.098-.04-.05-.02-.1-.035l-.117-.037-.117-.029-.091-.02a3 3 0 0 0-.205-.03l-.019-.002A3 3 0 0 0 8.5 12a.5.5 0 0 1 0-1A2.5 2.5 0 0 0 11 8.5a.5.5 0 0 1 .5-.5m0 2.302c-.295.49-.707.903-1.198 1.198.49.295.903.707 1.198 1.197.295-.49.707-.902 1.197-1.197a3.5 3.5 0 0 1-1.197-1.198" clip-rule="evenodd"/>
-  <path d="M5 13H3v-1h2zm0-3H3V9h2zm3 0H6V9h2zm6.5-3a.5.5 0 0 1 .5.5V8h.5a.5.5 0 0 1 0 1H15v.5a.5.5 0 0 1-1 0V9h-.5a.5.5 0 0 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5M5 7H3V6h2zm3 0H6V6h2zm5 0H9V6h4z"/>
+  <path fill-rule="evenodd" d="M13.995.95a1 1 0 0 1 1 1V10c-.156-.055-.509-.239-.688-.475a1.8 1.8 0 0 1-.316-.599l.004-3.977h-12v9h7.75c.037.106.101.395.128.528.027.132.047.355.047.472H1.995a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1zm-12 3h12v-2h-12z" clip-rule="evenodd"/>
+  <path d="M5 13H3v-1h2zm0-3H3V9h2zm3 0H6V9h2zM5 7H3V6h2zm3 0H6V6h2zm5 0H9V6h4zm-.5 1.501v.02l.005.093a3.8 3.8 0 0 0 .379 1.411c.19.379.466.742.87 1.011.402.268.96.463 1.747.463a.5.5 0 0 1 0 1c-.788 0-1.345.196-1.746.463-.405.27-.682.633-.87 1.012a3.8 3.8 0 0 0-.384 1.504l-.001.02v.002l-.01.1a.5.5 0 0 1-.98 0l-.01-.1v-.022l-.005-.093a4 4 0 0 0-.043-.35 3.8 3.8 0 0 0-.337-1.061 2.6 2.6 0 0 0-.87-1.012c-.4-.267-.958-.463-1.745-.463a.5.5 0 1 1 0-1c.787 0 1.344-.195 1.746-.463.404-.27.68-.632.869-1.01.19-.38.287-.767.337-1.062a4 4 0 0 0 .048-.442v-.023a.5.5 0 0 1 1 0zm-.5 1.99a3.56 3.56 0 0 1-1.2 1.377q-.102.07-.214.131.111.063.214.131c.573.382.951.887 1.2 1.378a3.57 3.57 0 0 1 1.413-1.509A3.57 3.57 0 0 1 12 10.49"/>
 </svg>

package/lib/components/key_pad_menu/key_pad_menu_item.styles.js

@@ -22,12 +22,14 @@ var euiKeyPadMenuItemStyles = exports.euiKeyPadMenuItemStyles = function euiKeyP
   var _euiKeyPadMenuVariabl = (0, _key_pad_menu.euiKeyPadMenuVariables)(euiThemeContext),
     euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize;
   return {
-    euiKeyPadMenuItem: /*#__PURE__*/(0, _react.css)("display:block;padding:", euiTheme.size.xs, ";", (0, _global_styling.logicalSizeCSS)(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.textParagraph, ";", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
+    euiKeyPadMenuItem: /*#__PURE__*/(0, _react.css)("display:block;padding:", euiTheme.size.xs, ";", (0, _global_styling.logicalSizeCSS)(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.control, ";color:", euiTheme.colors.textParagraph, ";", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
     enabled: /*#__PURE__*/(0, _react.css)("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;background-color:", euiTheme.colors.backgroundBaseInteractiveHover, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       // Use `outline` instead of border to avoid affecting absolutely positioned children
       preferred: "\n            outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";\n          ")
     }), ";}&:focus{box-shadow:none;background-color:", euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
-    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "\n          outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";\n        ")
+    }), " &:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       // Skip checkable items (which render a <label> instead of <button>/<a>),
       // as they already have sufficient indication of state (checkbox or radio)
       preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.primary, ";\n              outline-offset: 0;\n            }\n          ")

package/lib/components/link/link.js

@@ -39,7 +39,7 @@ var COLORS = exports.COLORS = ['primary', 'subdued', 'success', 'accent', 'dange
 var EuiLink = exports.EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    color = _ref$color === void 0 ? 'text' : _ref$color,
     className = _ref.className,
     href = _ref.href,
     external = _ref.external,
@@ -94,9 +94,11 @@ EuiLink.propTypes = {
   type: _propTypes.default.oneOf(["button", "reset", "submit"]),
   /**
      * Any of our named colors.
+     * @default text
      */
   /**
      * Any of our named colors.
+     * @default text
      */
   color: _propTypes.default.any,
   onClick: _propTypes.default.func,