@elastic/eui 122.0.0 → 122.1.0

package/optimize/lib/components/banner/banner.styles.js

@@ -46,7 +46,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiBannerStyles = exports.euiBannerStyles = function euiBannerStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiBanner: /*#__PURE__*/(0, _react.css)("container-name:", CONTAINER_NAME, ";container-type:inline-size;position:relative;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";&[data-size='s']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--s;}&[data-size='m']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--m;};label:euiBanner;"),
+    euiBanner: /*#__PURE__*/(0, _react.css)("container-name:", CONTAINER_NAME, ";container-type:inline-size;position:relative;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.panel, ";&[data-size='s']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--s;}&[data-size='m']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--m;};label:euiBanner;"),
     container: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;gap:", euiTheme.size.m, ";padding-inline-start:", euiTheme.size.base, ";padding-inline-end:", euiTheme.size.base, ";[data-size='m'] &{padding-block:", euiTheme.size.base, ";}[data-size='s'] &{padding-block:", euiTheme.size.m, ";}", withContainerQuery({
       layout: 'narrow',
       styles: "\n        flex-direction: row;\n        align-items: flex-start;\n        gap: ".concat(euiTheme.size.base, ";\n      ")

package/optimize/lib/components/basic_table/basic_table.styles.js

@@ -31,7 +31,7 @@ var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBa
 var euiBasicTableWrapperPanelledStyles = exports.euiBasicTableWrapperPanelledStyles = function euiBasicTableWrapperPanelledStyles(responsiveBreakpoint) {
   return function (theme) {
     var euiTheme = theme.euiTheme;
-    var styles = /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";border-block-end-width:0;padding-block-start:", euiTheme.border.width.thin, ";border-radius:", euiTheme.border.radius.medium, ";.euiTable{border-radius:", euiTheme.border.radius.medium, ";}.", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "+.euiBasicTable &{border-start-start-radius:0;border-start-end-radius:0;.euiTable{border-start-start-radius:0;border-start-end-radius:0;}}&:not(:last-child),&:has(+ .", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "){border-end-start-radius:0;border-end-end-radius:0;.euiTable{border-end-start-radius:0;border-end-end-radius:0;}};label:styles;");
+    var styles = /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";padding-block-start:", euiTheme.border.width.thin, ";border-radius:", euiTheme.border.radius.panel, ";&:not(:last-child){border-block-end-width:0;}.euiTable{border-radius:", euiTheme.border.radius.panel, ";}.", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "+.euiBasicTable &{border-start-start-radius:0;border-start-end-radius:0;.euiTable,.euiTable__wrapper,.euiTableStickyHeader__container{border-start-start-radius:0;border-start-end-radius:0;}.euiTableHeaderCell[data-sticky='start']{border-start-start-radius:0;}.euiTableHeaderCell[data-sticky='end']{border-start-end-radius:0;}}&:not(:last-child),&:has(+ .", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "){border-end-start-radius:0;border-end-end-radius:0;.euiTable{border-end-start-radius:0;border-end-end-radius:0;}.euiTableFooterCell{&[data-sticky='start'],&:first-child{border-end-start-radius:0;}&[data-sticky='end'],&:last-child{border-end-end-radius:0;}}}.euiTable__wrapper,.euiTableStickyHeader__container{border-start-start-radius:", euiTheme.border.radius.panel, ";border-start-end-radius:", euiTheme.border.radius.panel, ";}.euiTableHeaderCell{&[data-sticky='start']{border-start-start-radius:", euiTheme.border.radius.panel, ";}&[data-sticky='end']{border-start-end-radius:", euiTheme.border.radius.panel, ";}.euiTableCellContent{border-radius:inherit;}}.euiTableFooterCell{&[data-sticky='start'],&:first-child{border-end-start-radius:", euiTheme.border.radius.panel, ";}&[data-sticky='end'],&:last-child{border-end-end-radius:", euiTheme.border.radius.panel, ";}.euiTableCellContent{border-radius:inherit;}};label:styles;");
     if (responsiveBreakpoint === true) {
       return null;
     }

package/optimize/lib/components/basic_table/default_item_action.js

@@ -35,7 +35,7 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
     event.persist(); // TODO: Remove once React 16 support is dropped
     action.onClick(item, event);
   }, [action.onClick, item]);
-  var color = action.color ? (0, _action_types.callWithItemIfFunction)(item)(action.color) : 'primary';
+  var color = action.color ? (0, _action_types.callWithItemIfFunction)(item)(action.color) : 'text';
   var icon = action.icon ? (0, _action_types.callWithItemIfFunction)(item)(action.icon) : undefined;
   var actionContent = (0, _action_types.callWithItemIfFunction)(item)(action.name);
   var tooltipContent = (0, _action_types.callWithItemIfFunction)(item)(action.description);

package/optimize/lib/components/basic_table/pagination_bar.styles.js

@@ -21,6 +21,6 @@ var euiBasicTablePaginationBarStyles = exports.euiBasicTablePaginationBarStyles
   var euiTheme = theme.euiTheme;
   return {
     root: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:root;"),
-    panelled: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-start-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "0 0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium)), ";;label:panelled;")
+    panelled: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-start-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "0 0 ".concat(euiTheme.border.radius.panel, " ").concat(euiTheme.border.radius.panel)), ";;label:panelled;")
   };
 };

package/optimize/lib/components/basic_table/panel.styles.js

@@ -16,5 +16,5 @@ var _global_styling = require("../../global_styling");
 
 var euiBasicTablePanelStyles = exports.euiBasicTablePanelStyles = function euiBasicTablePanelStyles(_ref) {
   var euiTheme = _ref.euiTheme;
-  return /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-end-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0 0")), "&+&{border-start-start-radius:0;border-start-end-radius:0;};label:euiBasicTablePanelStyles;");
+  return /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-end-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(euiTheme.border.radius.panel, " ").concat(euiTheme.border.radius.panel, " 0 0")), "&+&{border-start-start-radius:0;border-start-end-radius:0;};label:euiBasicTablePanelStyles;");
 };

package/optimize/lib/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -52,19 +52,19 @@ var euiBreadcrumbContentStyles = exports.euiBreadcrumbContentStyles = function e
       return x * 10;
     })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
-    isInteractive: /*#__PURE__*/(0, _react.css)("&:not(:disabled){text-decoration:underline;&[class*='euiLink-subdued']{&:hover,&:focus{color:", euiTheme.colors.textParagraph, ";}}};label:isInteractive;"),
+    isInteractive: /*#__PURE__*/(0, _react.css)("&:where(:not(:disabled)){text-decoration:underline dotted;&[class*='euiLink-subdued']{&:hover,&:focus{color:", euiTheme.colors.textPrimary, ";}}};label:isInteractive;"),
     // Types
     page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),
     application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.medium, ";background-color:", applicationTextColors.backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: "border: ".concat(euiTheme.border.width.thin, " solid currentColor;")
-    }), " color:", applicationTextColors.color, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a, button){background-color:", applicationButtonColors.backgroundColor, ";color:", applicationButtonColors.color, ";}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;.euiBreadcrumb:has(&){z-index:2;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    }), " color:", applicationTextColors.color, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a, button){background-color:", applicationButtonColors.backgroundColor, ";color:", applicationButtonColors.color, ";text-decoration:none;}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:focus-visible{border-radius:", euiTheme.border.radius.control, ";clip-path:none;.euiBreadcrumb:has(&){z-index:2;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: 'filter: none;'
     }), ";}};label:application;"),
     applicationStyles: {
-      onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ";;label:onlyChild;"),
-      firstChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("".concat(euiTheme.border.radius.medium, " 0 0 ").concat(euiTheme.border.radius.medium), true), " clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), " ", applicationHighContrastArrow, ";;label:firstChild;"),
+      onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.control, ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ";;label:onlyChild;"),
+      firstChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("".concat(euiTheme.border.radius.control, " 0 0 ").concat(euiTheme.border.radius.control), true), " clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), " ", applicationHighContrastArrow, ";;label:firstChild;"),
       intermediateChild: "\n        clip-path: polygon(\n          0 0,\n          calc(100% - ".concat(euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ").concat(euiTheme.size.s, ") 100%,\n          0 100%,\n          ").concat(euiTheme.size.s, " 50%\n        );\n        ").concat(applicationHighContrastArrow, "\n      "),
-      lastChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0"), true), " clip-path:polygon(\n          0 0,\n          100% 0,\n          100% 100%,\n          0 100%,\n          ", euiTheme.size.s, " 50%\n        );", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.m), ";;label:lastChild;")
+      lastChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("0 ".concat(euiTheme.border.radius.control, " ").concat(euiTheme.border.radius.control, " 0"), true), " clip-path:polygon(\n          0 0,\n          100% 0,\n          100% 100%,\n          0 100%,\n          ", euiTheme.size.s, " 50%\n        );", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.m), ";;label:lastChild;")
     }
   };
 };

package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js

@@ -17,11 +17,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Styles cast to <li> element
  */
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1k7t4ns-isCollapsed",
-  styles: "flex-shrink:0;label:isCollapsed;"
+  name: "rcrisn-isCollapsed",
+  styles: "flex-shrink:0;.euiLink{text-decoration:none;};label:isCollapsed;"
 } : {
-  name: "1k7t4ns-isCollapsed",
-  styles: "flex-shrink:0;label:isCollapsed;",
+  name: "rcrisn-isCollapsed",
+  styles: "flex-shrink:0;.euiLink{text-decoration:none;};label:isCollapsed;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {

package/optimize/lib/components/button/button_display/_button_display.js

@@ -69,7 +69,8 @@ var EuiButtonDisplay = exports.EuiButtonDisplay = /*#__PURE__*/(0, _react.forwar
     isLoading = _ref2.isLoading,
     isSelected = _ref2.isSelected,
     fullWidth = _ref2.fullWidth,
-    minWidth = _ref2.minWidth,
+    _ref2$minWidth = _ref2.minWidth,
+    minWidth = _ref2$minWidth === void 0 ? false : _ref2$minWidth,
     contentProps = _ref2.contentProps,
     textProps = _ref2.textProps,
     href = _ref2.href,

package/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/components/card/card.js

@@ -269,7 +269,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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/components/comment_list/comment_event.js

@@ -62,7 +62,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/optimize/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/optimize/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/optimize/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/optimize/lib/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/optimize/lib/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/optimize/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/optimize/lib/components/description_list/description_list_description.js

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

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

@@ -53,6 +53,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,
@@ -88,7 +89,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/optimize/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/optimize/lib/components/empty_prompt/empty_prompt.js

@@ -48,11 +48,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]];