@elastic/eui 100.0.0 → 101.0.1

package/lib/components/date_picker/react_date_picker.styles.js

@@ -3,24 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiReactDatePickerStyles = exports.euiDatePickerVariables = exports._timeSelectStyles = exports._monthYearDropdowns = exports._dayCalendarStyles = void 0;
+exports.euiReactDatePickerStyles = exports.euiDatePickerVariables = void 0;
 var _css = require("@emotion/css");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _mixins = require("../../global_styling/mixins");
 var _form = require("../form/form.styles");
-/*
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
- */
-
-// Needs to use vanilla `css` to pass a className directly to react-datepicker
-
-var euiDatePickerVariables = exports.euiDatePickerVariables = function euiDatePickerVariables(_ref) {
-  var euiTheme = _ref.euiTheme;
+ */ // Needs to use vanilla `css` to pass a className directly to react-datepicker
+var euiDatePickerVariables = exports.euiDatePickerVariables = function euiDatePickerVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var unsetHighContrastBorder = function unsetHighContrastBorder(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      border: undefined
+    });
+  };
   return {
     gapSize: euiTheme.size.xs,
     get paddingSize() {
@@ -33,50 +42,94 @@ var euiDatePickerVariables = exports.euiDatePickerVariables = function euiDatePi
       return (0, _global_styling.mathWithUnits)([this.headerButtonSize, this.gapSize], function (x, y) {
         return x + y;
       });
-    }
+    },
+    colors: {
+      day: {
+        inMonth: euiTheme.colors.textHeading,
+        outsideMonth: euiTheme.colors.textSubdued,
+        header: euiTheme.colors.textSubdued,
+        today: euiTheme.colors.primary
+      },
+      hover: unsetHighContrastBorder((0, _mixins.euiButtonColor)(euiThemeContext, 'primary')),
+      disabled: unsetHighContrastBorder((0, _mixins.euiButtonColor)(euiThemeContext, 'disabled')),
+      get inRange() {
+        return this.hover;
+      },
+      inRangeAndDisabled: {
+        backgroundColor: (0, _mixins.euiButtonEmptyColor)(euiThemeContext, 'primary').backgroundColor
+      },
+      selected: highContrastMode !== 'forced' ? (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary') : {
+        color: euiTheme.colors.emptyShade,
+        backgroundColor: euiTheme.colors.fullShade,
+        forcedColorAdjust: 'none'
+      },
+      selectedAndDisabled: highContrastMode !== 'forced' ? (0, _mixins.euiButtonColor)(euiThemeContext, 'danger') : {
+        color: euiTheme.colors.textDanger,
+        backgroundColor: euiTheme.colors.emptyShade,
+        border: "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.textDanger, ";")
+      },
+      highlighted: (0, _mixins.euiButtonColor)(euiThemeContext, 'success')
+    },
+    animationSpeed: euiTheme.animation.fast
   };
 };
 var euiReactDatePickerStyles = exports.euiReactDatePickerStyles = function euiReactDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiDatePickerVariabl = euiDatePickerVariables(euiThemeContext),
-    gapSize = _euiDatePickerVariabl.gapSize,
-    paddingSize = _euiDatePickerVariabl.paddingSize,
-    headerOffset = _euiDatePickerVariabl.headerOffset;
+  var datePickerVars = euiDatePickerVariables(euiThemeContext);
+  var gapSize = datePickerVars.gapSize,
+    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.text, ";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, ";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',
     // The time select gets a little extra offset
     (0, _global_styling.mathWithUnits)([headerOffset, gapSize], function (x, y) {
       return x + y;
-    })), " ", (0, _global_styling.logicalCSS)('margin-left', paddingSize), (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{", (0, _global_styling.logicalCSS)('margin-top', gapSize), " ", (0, _global_styling.logicalCSS)('margin-left', 0), ";}}", _monthYearDropdowns(euiThemeContext), " ", _dayCalendarStyles(euiThemeContext), " ", _timeSelectStyles(euiThemeContext), ";;label:euiReactDatePicker;")
+    })), " ", (0, _global_styling.logicalCSS)('margin-left', paddingSize), (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{", (0, _global_styling.logicalCSS)('margin-top', gapSize), " ", (0, _global_styling.logicalCSS)('margin-left', 0), ";}}", _monthYearDropdowns(euiThemeContext, datePickerVars), " ", _dayCalendarStyles(euiThemeContext, datePickerVars), " ", _timeSelectStyles(euiThemeContext, datePickerVars), ";;label:euiReactDatePicker;")
   };
 };
-var _monthYearDropdowns = exports._monthYearDropdowns = function _monthYearDropdowns(euiThemeContext) {
+var _monthYearDropdowns = function _monthYearDropdowns(euiThemeContext, _ref) {
+  var colors = _ref.colors;
   var euiTheme = euiThemeContext.euiTheme;
   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), ";}.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{", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " line-height:", euiTheme.size.l, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.small, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{background-color:", euiTheme.focus.backgroundColor, ";}&--selected_year,&--selected_month{", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'), ";}&--selected{display:none;}}");
+  }), " ", (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, {
+    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;}}");
 };
-var _dayCalendarStyles = exports._dayCalendarStyles = function _dayCalendarStyles(euiThemeContext) {
+var _dayCalendarStyles = function _dayCalendarStyles(euiThemeContext, _ref2) {
+  var gapSize = _ref2.gapSize,
+    colors = _ref2.colors,
+    animationSpeed = _ref2.animationSpeed;
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiDatePickerVariabl2 = euiDatePickerVariables(euiThemeContext),
-    gapSize = _euiDatePickerVariabl2.gapSize;
   var daySize = euiTheme.size.xl;
   var dayMargin = (0, _global_styling.mathWithUnits)(gapSize, function (x) {
     return x / 2;
   });
-  var rangeBackgroundColor = (0, _mixins.euiButtonColor)(euiThemeContext, 'primary').backgroundColor;
   var rangeMarginOffset = (0, _global_styling.mathWithUnits)(dayMargin, function (x) {
     return x * 1.5;
   });
-  var animationSpeed = euiTheme.animation.fast;
-  return /*#__PURE__*/(0, _css.css)(".react-datepicker__day-names,.react-datepicker__week{display:flex;justify-content:space-between;flex-grow:1;color:", euiTheme.colors.subduedText, ";}.react-datepicker__day-name,.react-datepicker__day{display:inline-block;", (0, _global_styling.logicalCSS)('width', daySize), " line-height:", daySize, ";margin:", dayMargin, ";font-weight:", euiTheme.font.weight.medium, ";text-align:center;}.react-datepicker__day{color:", euiTheme.colors.title, ";border-radius:", euiTheme.border.radius.small, ";", _global_styling.euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}&:hover{", (0, _mixins.euiButtonColor)(euiThemeContext, 'primary'), " text-decoration:underline;cursor:pointer;", _global_styling.euiCanAnimate, "{transform:scale(1.1);}}&--today{color:", euiTheme.colors.primary, ";font-weight:", euiTheme.font.weight.bold, ";}&--outside-month{color:", euiTheme.colors.subduedText, ";}&--highlighted,&--highlighted:hover{", (0, _mixins.euiButtonColor)(euiThemeContext, 'success'), ";}&--in-range,&--in-range:hover{", (0, _mixins.euiButtonColor)(euiThemeContext, 'primary'), ";}&--in-range:not(&--selected):not(:hover):not(&--disabled){box-shadow:-", rangeMarginOffset, " 0 ", rangeBackgroundColor, ",", rangeMarginOffset, " 0 ", rangeBackgroundColor, ";border-radius:0;&:first-child{box-shadow:", rangeMarginOffset, " 0 ", rangeBackgroundColor, ";}&:last-child{box-shadow:-", rangeMarginOffset, " 0 ", rangeBackgroundColor, ";}}&--in-range:not(&--selected){", _global_styling.euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,box-shadow ", animationSpeed, " ease-in-out,border-radius ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}}&--selected,&--selected:hover,&--in-selecting-range,&--in-selecting-range:hover{", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'), ";}&--disabled,&--disabled:hover{", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled'), " cursor:not-allowed;text-decoration:none;transform:none;}&--disabled.react-datepicker__day--in-range:not(&--selected){&,&:hover{background-color:", (0, _mixins.euiButtonEmptyColor)(euiThemeContext, 'primary').backgroundColor, ";}}&--in-selecting-range:not(&--in-range),&--disabled.react-datepicker__day--selected,&--disabled.react-datepicker__day--selected:hover{", (0, _mixins.euiButtonColor)(euiThemeContext, 'danger'), ";}}");
+  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, {
+    // 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        "),
+    // In Windows high contrast mode, use borders and pseudo elements instead of background colors
+    forced: "\n          &--in-range:not(&--selected) {\n            position: relative;\n            transform: none;\n\n            &::before {\n              content: '';\n              position: absolute;\n              inset-inline: -".concat(dayMargin, ";\n              inset-block: ").concat(dayMargin, ";\n              border-block: ").concat(euiTheme.border.thin, ";\n              pointer-events: none;\n            }\n          }\n          &--range-start:not(&--selected)::before {\n            border-inline-start: ").concat(euiTheme.border.thin, ";\n          }\n          &--range-end:not(&--selected)::before {\n            border-inline-end: ").concat(euiTheme.border.thin, ";\n          }\n        ")
+  }), " &--selected,&--selected:hover,&--in-selecting-range,&--in-selecting-range:hover{", colors.selected, ";}&--disabled,&--disabled:hover{", colors.disabled, " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    forced: 'opacity: 0.5;'
+  }), " cursor:not-allowed;text-decoration:none;transform:none;}&--disabled.react-datepicker__day--in-range:not(&--selected){&,&:hover{", colors.inRangeAndDisabled, ";}}&--in-selecting-range:not(&--in-range),&--disabled.react-datepicker__day--selected,&--disabled.react-datepicker__day--selected:hover{", colors.selectedAndDisabled, " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    forced: 'opacity: 1;'
+  }), ";}}");
 };
-var _timeSelectStyles = exports._timeSelectStyles = function _timeSelectStyles(euiThemeContext) {
+var _timeSelectStyles = function _timeSelectStyles(euiThemeContext, _ref3) {
+  var gapSize = _ref3.gapSize,
+    colors = _ref3.colors,
+    animationSpeed = _ref3.animationSpeed;
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiDatePickerVariabl3 = euiDatePickerVariables(euiThemeContext),
-    gapSize = _euiDatePickerVariabl3.gapSize;
   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, {
     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{", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " line-height:", euiTheme.size.l, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-align:center;border-radius:", euiTheme.border.radius.small, ";&:not(:disabled):hover{text-decoration:underline;cursor:pointer;}&--disabled{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";}&--injected{", (0, _mixins.euiButtonEmptyColor)(euiThemeContext, 'success'), ";}&--selected{", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'), ";}&--preselected{background-color:", euiTheme.focus.backgroundColor, ";}", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " 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;}}");
+  }), " 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, {
+    // 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

@@ -7,6 +7,7 @@ exports.euiSuperDatePickerStyles = exports._buttonStyles = void 0;
 var _react = require("@emotion/react");
 var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _form = require("../../form/form.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
@@ -71,11 +72,24 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        none: 'box-shadow: none;',
+        preferred: 'border: none;'
+      }), ";};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: false,
+        withBackgroundColor: false
+      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";", (0, _form.euiFormControlShowBackgroundUnderline)(euiThemeContext, euiTheme.colors.primary), ";};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, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: false,
+        withBackgroundColor: false
+      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";", (0, _form.euiFormControlShowBackgroundUnderline)(euiThemeContext, euiTheme.colors.success), ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        // Force the fill color of all icons/svgs to give a bit more indication of state,
+        // since Windows high contrast themes otherwise override background/text color
+        forced: "\n            svg,\n            & + * svg {\n              fill: ".concat(euiTheme.colors.success, ";\n            }\n          ")
+      }), ";;label:needsUpdating;")
     }
   };
 };

package/lib/components/description_list/description_list_title.styles.js

@@ -23,7 +23,7 @@ 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.title, ";"), "&:first-of-type{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";};label:inline;"),
+    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;"),
     // 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;"),

package/lib/components/empty_prompt/empty_prompt.styles.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiEmptyPromptStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -108,8 +109,12 @@ var euiEmptyPromptStyles = exports.euiEmptyPromptStyles = function euiEmptyPromp
       euiEmptyPrompt__footer: _ref2,
       roundedBorders: _ref,
       // Colors
-      transparent: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";;label:transparent;"),
-      plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";;label:plain;"),
+      transparent: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        preferred: "border: ".concat(euiTheme.border.thin, ";")
+      }), ";;label:transparent;"),
+      plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        preferred: (0, _global_styling.logicalCSS)('border-top', generateFooterBorder('plain'))
+      }), ";;label:plain;"),
       subdued: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('subdued')), ";;label:subdued;"),
       highlighted: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('plain')), ";;label:highlighted;"),
       primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('primary')), ";;label:primary;"),

package/lib/components/error_boundary/error_boundary.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiErrorBoundaryStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,11 +16,17 @@ var _services = require("../../services");
  * Side Public License, v 1.
  */
 
-var euiErrorBoundaryStyles = exports.euiErrorBoundaryStyles = function euiErrorBoundaryStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
-  var color1 = (0, _services.transparentize)(euiTheme.colors.danger, 0.25);
-  var color2 = (0, _services.transparentize)(euiTheme.colors.danger, 0.05);
+var euiErrorBoundaryStyles = exports.euiErrorBoundaryStyles = function euiErrorBoundaryStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var color1 = (0, _services.transparentize)(euiTheme.colors.danger, highContrastMode ? 1 : 0.25);
+  var color2 = (0, _services.transparentize)(euiTheme.colors.danger, highContrastMode ? 0.25 : 0.05);
   return {
-    euiErrorBoundary: /*#__PURE__*/(0, _react.css)("background-image:repeating-linear-gradient(\n        45deg,\n        ", color1, ",\n        ", color1, " 1px,\n        ", color2, " 1px,\n        ", color2, " 19px\n      );background-size:54px 54px;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";;label:euiErrorBoundary;")
+    euiErrorBoundary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "\n          background-image: repeating-linear-gradient(\n            45deg,\n            ".concat(color1, ",\n            ").concat(color1, " 1px,\n            ").concat(color2, " 1px,\n            ").concat(color2, " 19px\n          );\n          background-size: 54px 54px; /* Fix for Safari 15.4+ */\n        "),
+      // Windows high contrast themes ignore background-images that aren't url()s.
+      // We can fake a basic danger-colored "border" with a little inline SVG trickery
+      forced: "\n          background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='".concat(encodeURIComponent(euiTheme.colors.textDanger), "' /%3E%3C/svg%3E\");\n        ")
+    }), ";;label:euiErrorBoundary;")
   };
 };

package/lib/components/expression/expression.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiExpressionValueStyles = exports.euiExpressionStyles = exports.euiExpressionIconStyles = exports.euiExpressionDescriptionStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _color = require("../../services/color");
 function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
 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)."; } /*
@@ -21,11 +22,14 @@ var _colorCSS = function _colorCSS(color) {
 var euiExpressionStyles = exports.euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), " display:inline-block;font-family:", euiTheme.font.familyCode, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat((0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
+    euiExpression: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), " display:inline-block;font-family:", euiTheme.font.familyCode, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat((0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
       return x / 2;
-    }), " 0")), " color:", euiTheme.colors.text, ";&:focus{", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";}&+.euiExpression{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    }), " 0")), " color:", euiTheme.colors.textParagraph, ";&:focus{", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";}&+.euiExpression{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
-    columns: /*#__PURE__*/(0, _react.css)("border-color:transparent;", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
+    columns: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), " padding:", euiTheme.size.xs, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      // Render the bottom border in high contrast mode for extra visibility
+      none: "\n          border-radius: ".concat(euiTheme.size.xs, ";\n          border-color: transparent;\n        ")
+    }), ";;label:columns;"),
     truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:truncate;"),
     // States
     isClickable: /*#__PURE__*/(0, _react.css)("cursor:pointer;", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.editable), " &[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),

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

@@ -36,14 +36,16 @@ var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterBu
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlHeight = _euiFormVariables.controlHeight,
     borderColor = _euiFormVariables.borderColor;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
 
-  // Box shadow simulates borders without affecting width
-  var leftBoxShadow = "-".concat(euiTheme.border.width.thin, " 0 0 0 ").concat(borderColor);
+  // Pseudo elements create borders without affecting width. We also prefer them
+  // over box-shadow for Windows high contrast theme compatibility
+  var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('right', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('vertical', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n  ");
   // Bottom borders are needed for responsive flex-wrap behavior
-  var bottomBoxShadow = "0 ".concat(euiTheme.border.width.thin, " 0 0 ").concat(borderColor);
+  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n    }\n  ");
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
-    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;", leftBorder, " ", bottomBorder, "&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
+    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;

package/lib/components/filter_group/filter_group.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiFilterGroupStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _form = require("../form/form.styles");
 var _filter_button = require("./filter_button.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)."; } /*
@@ -32,7 +33,10 @@ var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGrou
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
+      forced: "border: ".concat(euiTheme.border.thin, ";")
+    }), ">*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),

package/lib/components/filter_group/filter_select_item.styles.js

@@ -18,7 +18,7 @@ var euiFilterSelectItemStyles = exports.euiFilterSelectItemStyles = function eui
   var euiTheme = euiThemeContext.euiTheme;
   var focusStyles = "\n    color: ".concat(euiTheme.colors.primary, ";\n    background-color: ").concat(euiTheme.focus.backgroundColor, ";\n    outline-offset: -").concat(euiTheme.focus.width, ";\n    text-decoration: underline;\n\n    &:disabled {\n      background-color: ").concat(euiTheme.components.filterSelectItemBackgroundFocusDisabled, ";\n    }\n  ");
   return {
-    euiFilterSelectItem: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.text, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.lightestShade)), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.disabledText, ";};label:euiFilterSelectItem;"),
+    euiFilterSelectItem: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.textParagraph, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBaseSubdued)), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.textDisabled, ";};label:euiFilterSelectItem;"),
     isFocused: /*#__PURE__*/(0, _react.css)(focusStyles, ";;label:isFocused;")
   };
 };

package/lib/components/flyout/_flyout_close_button.styles.js

@@ -21,7 +21,9 @@ var euiFlyoutCloseButtonStyles = exports.euiFlyoutCloseButtonStyles = function e
   return {
     euiFlyout__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
     inside: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.flyoutCloseButtonInsideBackground, ";;label:inside;"),
-    outside: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext), "animation:none!important;;label:outside;"),
+    outside: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), "animation:none!important;;label:outside;"),
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons

package/lib/components/flyout/flyout.styles.js

@@ -44,7 +44,9 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: {
-      overlay: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
+      overlay: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+        borderAllInHighContrastMode: true
+      }), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
       left: /*#__PURE__*/(0, _react.css)("border-inline-end:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:left;"),
       right: /*#__PURE__*/(0, _react.css)("border-inline-start:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:right;")
     },

package/lib/components/flyout/flyout_body.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiFlyoutBodyStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -15,6 +16,7 @@ var _global_styling = require("../../global_styling");
  */
 
 var euiFlyoutBodyStyles = exports.euiFlyoutBodyStyles = function euiFlyoutBodyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyoutBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFlyoutBody;"),
     overflow: {
@@ -24,6 +26,8 @@ var euiFlyoutBodyStyles = exports.euiFlyoutBodyStyles = function euiFlyoutBodySt
         side: 'end'
       }), ";;label:hasBanner;")
     },
-    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), ";;label:euiFlyoutBody__banner;")
+    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin)
+    }), ";;label:euiFlyoutBody__banner;")
   };
 };

package/lib/components/flyout/flyout_footer.styles.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFlyoutFooterStyles = void 0;
 var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,6 +18,8 @@ var _react = require("@emotion/react");
 var euiFlyoutFooterStyles = exports.euiFlyoutFooterStyles = function euiFlyoutFooterStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyoutFooter: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.flyoutFooterBackground, ";flex-grow:0;;label:euiFlyoutFooter;")
+    euiFlyoutFooter: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.flyoutFooterBackground, ";flex-grow:0;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin)
+    }), ";;label:euiFlyoutFooter;")
   };
 };

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

@@ -67,7 +67,7 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
       euiFilePicker__input: _ref4,
       largeInteractive: _ref3
     },
-    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.border.color, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
     disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,