@elastic/eui 97.3.0 → 97.3.1-rc.0

package/es/components/form/switch/switch.styles.js

@@ -12,11 +12,12 @@ import { tint } from '../../../services';
 import { euiCanAnimate, euiFocusRing, euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../global_styling';
 import { euiFormCustomControlVariables } from '../form.styles';
 var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var formVars = euiFormCustomControlVariables(euiThemeContext);
   var colors = {
     on: formVars.colors.selected,
-    off: formVars.colors.unselectedBorder,
+    off: highContrastMode ? euiTheme.colors.darkShade : formVars.colors.unselectedBorder,
     disabled: formVars.colors.disabled,
     thumb: formVars.colors.selectedIcon,
     thumbBorder: formVars.colors.unselectedBorder,
@@ -78,7 +79,7 @@ var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
     label: label
   };
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "b86pnw-disabled",
   styles: "cursor:not-allowed;label:disabled;"
 } : {
@@ -86,7 +87,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;label:disabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "eg68pp-euiSwitch",
   styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;"
 } : {
@@ -97,10 +98,10 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiSwitchStyles = function euiSwitchStyles(euiThemeContext) {
   var switchVars = euiSwitchVars(euiThemeContext);
   return {
-    euiSwitch: _ref3,
+    euiSwitch: _ref2,
     // Skip css`` to avoid generating an extra Emotion className
     enabled: "\n      cursor: pointer;\n    ",
-    disabled: _ref2,
+    disabled: _ref,
     button: buttonStyles(euiThemeContext, switchVars),
     // The track body must be separate from the button wrapper, because the
     // icons have their overflow hidden outside the button, but the thumb doesn't
@@ -123,17 +124,11 @@ var buttonStyles = function buttonStyles(euiThemeContext, switchVars) {
     mini: /*#__PURE__*/css(logicalSizeCSS(mini.width, mini.height), " border-radius:", mini.height, ";;label:mini;")
   };
 };
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "19cwu6v-euiSwitch__body",
-  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;"
-} : {
-  name: "19cwu6v-euiSwitch__body",
-  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var bodyStyles = function bodyStyles(_ref4, _ref5) {
-  var colorMode = _ref4.colorMode;
-  var colors = _ref5.colors;
+var bodyStyles = function bodyStyles(_ref3, _ref4) {
+  var colorMode = _ref3.colorMode,
+    highContrastMode = _ref3.highContrastMode,
+    euiTheme = _ref3.euiTheme;
+  var colors = _ref4.colors;
   // This is probably very extra, but the visual weight of the default
   // disabled custom control feels different in light mode depending
   // on the size of the switch, so I'm tinting it based on that.
@@ -142,7 +137,8 @@ var bodyStyles = function bodyStyles(_ref4, _ref5) {
     return /*#__PURE__*/css("label:disabled;background-color:", colorMode === 'DARK' ? colors.disabled : tint(colors.disabled, tintAmount), ";");
   };
   return {
-    euiSwitch__body: _ref,
+    euiSwitch__body: /*#__PURE__*/css("position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;", highContrastMode ? // For Windows high contrast themes, a border *must* be rendered, not just a background
+    "border: ".concat(euiTheme.border.width.thin, " solid transparent;") : '', ";;label:euiSwitch__body;"),
     on: /*#__PURE__*/css("background-color:", colors.on, ";;label:on;"),
     off: /*#__PURE__*/css("background-color:", colors.off, ";;label:off;"),
     disabled: {
@@ -152,10 +148,10 @@ var bodyStyles = function bodyStyles(_ref4, _ref5) {
     }
   };
 };
-var iconStyles = function iconStyles(_ref6, _ref7) {
-  var euiTheme = _ref6.euiTheme;
-  var colors = _ref7.colors,
-    animation = _ref7.animation;
+var iconStyles = function iconStyles(_ref5, _ref6) {
+  var euiTheme = _ref5.euiTheme;
+  var colors = _ref6.colors,
+    animation = _ref6.animation;
   return {
     euiSwitch__icons: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', '-50%'), " ", logicalCSS('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", logicalCSS('padding-horizontal', euiTheme.size.xs), " ", euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
     on: /*#__PURE__*/css(logicalCSS('left', '-25%'), ";;label:on;"),
@@ -164,8 +160,9 @@ var iconStyles = function iconStyles(_ref6, _ref7) {
     disabled: /*#__PURE__*/css("color:", colors.thumbBorderDisabled, ";;label:disabled;")
   };
 };
-var thumbStyles = function thumbStyles(_ref8, switchVars) {
-  var euiTheme = _ref8.euiTheme;
+var thumbStyles = function thumbStyles(_ref7, switchVars) {
+  var euiTheme = _ref7.euiTheme,
+    highContrastMode = _ref7.highContrastMode;
   var sizes = switchVars.sizes,
     colors = switchVars.colors,
     animation = switchVars.animation;
@@ -181,18 +178,33 @@ var thumbStyles = function thumbStyles(_ref8, switchVars) {
     euiSwitch__thumb: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " aspect-ratio:1;", logicalCSS('width', 'fit-content'), " ", logicalCSS('height', '100%'), " border-radius:50%;pointer-events:none;", euiCanAnimate, "{transition-property:inset-inline-start,transform,background-color,border-color;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__thumb;"),
     off: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:off;"),
     get on() {
+      var _sizeBasedCss = function _sizeBasedCss(bodyWidth, thumbWidth) {
+        return /*#__PURE__*/css("label:on;", _calculateLeft(bodyWidth, thumbWidth), " ", _highContrastOn(thumbWidth), ";");
+      };
+
       // right: 0 works but doesn't transition/animate, so we need to
       // manually calculate the left position per switch size
       var _calculateLeft = function _calculateLeft(bodyWidth, thumbWidth) {
         var leftPosition = mathWithUnits([bodyWidth, thumbWidth], function (x, y) {
           return x - y;
         });
-        return /*#__PURE__*/css("label:on;", logicalCSS('left', leftPosition), ";");
+        return logicalCSS('left', leftPosition);
+      };
+
+      // Windows high contrast themes ignore background-color, making on vs. off state (for
+      // sizes without icons) impossible to distinguish without this pseudo border workaround
+      var _highContrastOn = function _highContrastOn(thumbWidth) {
+        if (highContrastMode) {
+          var borderSize = mathWithUnits(thumbWidth, function (x) {
+            return x / 2;
+          });
+          return "\n            overflow: hidden;\n            &::after {\n              content: '';\n              position: absolute;\n              inset: 0;\n              border-radius: 50%;\n              border: ".concat(borderSize, " solid ").concat(colors.thumb, ";\n            }\n          ");
+        }
       };
       return {
-        uncompressed: _calculateLeft(uncompressed.width, uncompressed.height),
-        compressed: _calculateLeft(compressed.width, compressed.height),
-        mini: _calculateLeft(mini.width, mini.height)
+        uncompressed: _sizeBasedCss(uncompressed.width, uncompressed.height),
+        compressed: _sizeBasedCss(compressed.width, compressed.height),
+        mini: _sizeBasedCss(mini.width, mini.height)
       };
     },
     enabled: {
@@ -209,9 +221,9 @@ var thumbStyles = function thumbStyles(_ref8, switchVars) {
     }
   };
 };
-var labelStyles = function labelStyles(euiThemeContext, _ref9) {
-  var sizes = _ref9.sizes,
-    label = _ref9.label;
+var labelStyles = function labelStyles(euiThemeContext, _ref8) {
+  var sizes = _ref8.sizes,
+    label = _ref8.label;
   var uncompressed = sizes.uncompressed,
     compressed = sizes.compressed,
     mini = sizes.mini;

package/es/components/horizontal_rule/horizontal_rule.styles.js

@@ -9,9 +9,12 @@
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 export var euiHorizontalRuleStyles = function euiHorizontalRuleStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   return {
-    euiHorizontalRule: /*#__PURE__*/css("border:none;", logicalCSS('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
+    euiHorizontalRule: /*#__PURE__*/css("border:none;", highContrastMode ?
+    // Windows high contrast themes forcibly remove background colors but respects borders
+    logicalCSS('border-bottom', euiTheme.border.thin) : "\n    ".concat(logicalCSS('height', euiTheme.border.width.thin), "\n    background-color: ").concat(euiTheme.border.color, ";\n"), "flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
     // Sizes
     full: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:full;"),
     half: /*#__PURE__*/css(logicalCSS('width', '50%'), " ", logicalCSS('margin-horizontal', 'auto'), ";;label:half;"),

package/es/components/image/image.styles.js

@@ -14,7 +14,9 @@ export var euiImageStyles = function euiImageStyles(euiThemeContext) {
     euiImage: /*#__PURE__*/css("vertical-align:middle;", logicalCSS('max-width', '100%'), " &,[class*='euiText'] &{", logicalCSS('margin-bottom', 0), ";};label:euiImage;"),
     // Variations
     isFullScreen: /*#__PURE__*/css("position:relative;", logicalCSS('max-height', '80vh'), " ", logicalCSS('max-width', '80vw'), ";;label:isFullScreen;"),
-    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 's'), ";;label:hasShadow;"),
+    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 's', {
+      borderAllInHighContrastMode: true
+    }), ";;label:hasShadow;"),
     // Sizes
     // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
     // Size is applied to the image, rather than the wrapper figure to work better with floats

package/es/components/image/image_button.styles.js

@@ -16,8 +16,12 @@ export var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext)
     // Base
     euiImageButton: /*#__PURE__*/css("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;inset:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;"),
-    shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's'), ";};label:shadowHover;"),
-    hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm'), ";};label:hasShadowHover;")
+    shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's', {
+      borderAllInHighContrastMode: true
+    }), ";};label:shadowHover;"),
+    hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm', {
+      borderAllInHighContrastMode: true
+    }), ";};label:hasShadowHover;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {

package/es/components/key_pad_menu/key_pad_menu_item.js

@@ -45,7 +45,7 @@ export var EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
   var isDisabled = disabled || _isDisabled || !isHrefValid;
   var euiTheme = useEuiTheme();
   var styles = euiKeyPadMenuItemStyles(euiTheme);
-  var cssStyles = [styles.euiKeyPadMenuItem, !isDisabled ? styles.enabled : styles.disabled.disabled, isSelected && (!isDisabled ? styles.selected : styles.disabled.selected)];
+  var cssStyles = [styles.euiKeyPadMenuItem, !isDisabled ? styles.enabled : styles.disabled.disabled, isSelected && (!isDisabled ? styles.selected : styles.disabled.selected), euiTheme.highContrastMode && isSelected && !checkable && styles.selectedHighContrast];
   var classes = classNames('euiKeyPadMenuItem', className);
   var Element = href && !isDisabled ? 'a' : 'button';
   if (checkable) Element = 'label';

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

@@ -13,16 +13,21 @@ import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 import { euiScreenReaderOnly } from '../accessibility';
 import { euiKeyPadMenuVariables } from './key_pad_menu.styles';
 export var euiKeyPadMenuItemStyles = function euiKeyPadMenuItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
     euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize;
   return {
     euiKeyPadMenuItem: /*#__PURE__*/css("display:block;padding:", euiTheme.size.xs, ";", logicalSizeCSS(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.text, ";", euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
-    enabled: /*#__PURE__*/css("&:hover,&:focus,&:focus-within{cursor:pointer;text-decoration:underline;", euiShadow(euiThemeContext, 's'), " ", euiCanAnimate, "{.euiKeyPadMenuItem__icon{transform:translateY(0);}}}&:focus{background-color:", euiTheme.focus.backgroundColor, ";box-shadow:none;};label:enabled;"),
-    selected: /*#__PURE__*/css("color:", euiTheme.colors.title, ";background-color:", euiTheme.focus.backgroundColor, ";&,&:hover,&:focus,&:focus-within{color:", euiTheme.colors.primaryText, ";};label:selected;"),
+    enabled: /*#__PURE__*/css("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;", highContrastMode ? // Use `outline` instead of border to avoid affecting absolutely positioned children
+    "outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";") : euiShadow(euiThemeContext, 's'), " ", euiCanAnimate, "{.euiKeyPadMenuItem__icon{transform:translateY(0);}}}&:focus{background-color:", euiTheme.focus.backgroundColor, ";box-shadow:none;};label:enabled;"),
+    selected: /*#__PURE__*/css("color:", euiTheme.colors.title, ";background-color:", euiTheme.focus.backgroundColor, ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.primaryText, ";};label:selected;"),
+    // Windows high contrast themes ignore background-color, so we need to ensure
+    // that selected item state is clearly via `outline`
+    selectedHighContrast: /*#__PURE__*/css(":is(*, :hover, :focus, :focus-within){outline:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";outline-offset:0;};label:selectedHighContrast;"),
     disabled: {
       disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";.euiKeyPadMenuItem__icon{filter:grayscale(100%);svg *{fill:", euiTheme.colors.disabledText, ";}};label:disabled;"),
-      selected: /*#__PURE__*/css("background-color:", transparentize(euiTheme.colors.disabled, euiTheme.focus.transparency), ";;label:selected;")
+      selected: /*#__PURE__*/css("background-color:", transparentize(euiTheme.colors.disabled, euiTheme.focus.transparency), ";", highContrastMode ? "outline-color: ".concat(euiTheme.colors.disabledText, " !important;") : '', ";;label:selected;")
     }
   };
 };
@@ -34,7 +39,7 @@ export var euiKeyPadMenuItemChildStyles = function euiKeyPadMenuItemChildStyles(
     euiKeyPadMenuItem__icon: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.m), " transform:translateY(2px);", euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";};label:euiKeyPadMenuItem__icon;"),
     euiKeyPadMenuItem__label: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.semiBold, ";text-align:center;;label:euiKeyPadMenuItem__label;"),
     euiKeyPadMenuItem__betaBadge: /*#__PURE__*/css(topRightChildren, ";;label:euiKeyPadMenuItem__betaBadge;"),
-    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/css(topRightChildren, " transform:scale(.75);transform-origin:top right;&&{position:absolute;};label:euiKeyPadMenuItem__checkableInput;"),
+    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/css("position:absolute;", topRightChildren, " transform:scale(.75);transform-origin:top right;;label:euiKeyPadMenuItem__checkableInput;"),
     showCheckableInputOnInteraction: /*#__PURE__*/css(".euiKeyPadMenuItem:not(:hover, :focus, :focus-within) &{", euiScreenReaderOnly(), ";};label:showCheckableInputOnInteraction;"),
     hideCheckableInput: /*#__PURE__*/css(euiScreenReaderOnly(), ";;label:hideCheckableInput;")
   };

package/es/components/loading/loading_chart.js

@@ -40,10 +40,15 @@ export var EuiLoadingChart = function EuiLoadingChart(_ref) {
   }, rest), Array.from({
     length: BARS_COUNT
   }, function (_, index) {
-    return ___EmotionJSX("span", {
-      key: index,
-      css: barCssStyles
-    });
+    return (
+      // Windows high contrast themes ignore background-color on all elements except svgs
+      // We're using the element here as shortcut (+ b/c loading logos are already SVGs)
+      ___EmotionJSX("svg", {
+        key: index,
+        css: barCssStyles,
+        "aria-hidden": true
+      })
+    );
   }));
 };
 EuiLoadingChart.propTypes = {

package/es/components/loading/loading_spinner.styles.js

@@ -29,16 +29,32 @@ export var euiSpinnerBorderColorsCSS = function euiSpinnerBorderColorsCSS(_ref)
 export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", logicalShorthandCSS('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;@media (forced-colors: none){border:", euiTheme.border.thick, ";", logicalShorthandCSS('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), ";}", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
       return x * 1.5;
-    }), ";;label:s;"),
-    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+    }), ";", _highContrastFallback(euiThemeContext, 's'), ";;label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
       return x * 1.5;
-    }), ";;label:m;"),
-    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
-    xl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
-    xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")
+    }), ";", _highContrastFallback(euiThemeContext), ";;label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.l]), " ", _highContrastFallback(euiThemeContext), ";;label:l;"),
+    xl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xl]), " ", _highContrastFallback(euiThemeContext), ";;label:xl;"),
+    xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), " ", _highContrastFallback(euiThemeContext), ";;label:xxl;")
   };
+};
+
+// Windows high contrast themes allow colors on url-based background-images,
+// so we're inline an SVG to render as a fallback (using opposite shades for contrast)
+var _highContrastFallback = function _highContrastFallback(_ref2) {
+  var euiTheme = _ref2.euiTheme,
+    highContrastMode = _ref2.highContrastMode;
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'm';
+  if (!highContrastMode) return '';
+  var colorOne = encodeURIComponent(euiTheme.colors.emptyShade);
+  var colorTwo = encodeURIComponent(euiTheme.colors.fullShade);
+  var pathSizes = {
+    s: ["d='M10 0a10 10 0 0 1 9.75 12.225l-2.925-.668A7 7 0 0 0 10 3Z'", "d='M19.75 12.225A10 10 0 1 1 9.997 0v3a7 7 0 1 0 6.827 8.557Z'"],
+    m: ["d='M10 0a10 10 0 0 1 9.75 12.225l-1.95-.445A8 8 0 0 0 10 2Z'", "d='M19.75 12.225A10 10 0 1 1 9.997 0v2a8 8 0 1 0 7.802 9.78Z'"]
+  };
+  return "\n    @media (forced-colors: active) {\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 20 20'%3E%3Cpath fill='".concat(colorOne, "' ").concat(pathSizes[size][0], " /%3E%3Cpath fill='").concat(colorTwo, "' ").concat(pathSizes[size][1], " /%3E%3C/svg%3E\");\n    }\n  ");
 };

package/es/components/mark/mark.styles.js

@@ -7,18 +7,14 @@
  */
 
 import { css } from '@emotion/react';
-import { transparentize } from '../../services';
 import { euiScreenReaderOnly } from '../accessibility';
 export var euiMarkStyles = function euiMarkStyles(_ref) {
   var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
-  // TODO: Was $euiFocusBackgroundColor
-  var transparency = {
-    LIGHT: 0.1,
-    DARK: 0.3
-  };
+    highContrastMode = _ref.highContrastMode;
+  var backgroundColor = highContrastMode ? euiTheme.colors.primaryText : euiTheme.focus.backgroundColor;
+  var textColor = highContrastMode ? "".concat(euiTheme.colors.ghost, " !important") : euiTheme.colors.text;
   return {
-    euiMark: /*#__PURE__*/css("background-color:", transparentize(euiTheme.colors.primary, transparency[colorMode]), ";font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.text, ";;label:euiMark;")
+    euiMark: /*#__PURE__*/css("background-color:", backgroundColor, ";font-weight:", euiTheme.font.weight.bold, ";color:", textColor, ";;label:euiMark;")
   };
 };
 export var euiMarkScreenReaderStyles = function euiMarkScreenReaderStyles(highlightStart, highlightEnd) {

package/es/components/markdown_editor/markdown_format.styles.js

@@ -7,7 +7,6 @@
  */
 
 import { css } from '@emotion/react';
-import { transparentize } from '../../services';
 import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 
 /**
@@ -55,13 +54,13 @@ export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme)
       unit: 'em'
     }), ";label:relative;"),
     colors: {
-      default: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, transparentize(euiTheme.euiTheme.colors.fullShade, 0.15)), ";label:default;"),
-      subdued: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
+      default: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.border.color), ";label:default;"),
+      subdued: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.highContrastMode ? euiTheme.euiTheme.border.color : euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
       success: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
       accent: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
       warning: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
       danger: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
-      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
+      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.highContrastMode ? euiTheme.euiTheme.border.color : euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
       inherit: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
       custom: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
     }

package/es/components/modal/modal.styles.js

@@ -13,11 +13,14 @@ import { euiFormVariables } from '../form/form.styles';
 export var euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{", euiShadowXLarge(euiThemeContext, {
-      reverse: true
+      reverse: true,
+      borderAllInHighContrastMode: true
     }), " inset-block-start:auto;};label:confirmation;"),
     euiModal__closeIcon: /*#__PURE__*/css("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")
   };

package/es/components/page/page_header/page_header_content.js

@@ -177,8 +177,9 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return ___EmotionJSX(EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/es/components/page/page_header/page_header_content.styles.js

@@ -83,7 +83,8 @@ export var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/css("@container (max-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;", logicalCSS('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/css("position:relative;", logicalCSS('top', "-".concat(euiTheme.size.xs)), " ", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

package/es/components/panel/panel.js

@@ -4,6 +4,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
@@ -17,8 +23,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
-import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
+import { useEuiBackgroundColorCSS, useEuiBorderColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
 import { euiPanelStyles } from './panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -53,11 +59,19 @@ export var EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // Add borders to panels in high contrast mode
+  var _useEuiTheme = useEuiTheme(),
+    highContrastMode = _useEuiTheme.highContrastMode,
+    euiTheme = _useEuiTheme.euiTheme;
+  var borderColors = useEuiBorderColorCSS();
+
   // Shadows are only allowed when there's a white background (plain)
-  var canHaveShadow = !hasBorder && color === 'plain';
+  var canHaveShadow = !hasBorder && color === 'plain' && !highContrastMode;
   var canHaveBorder = color === 'plain' || color === 'transparent';
   var styles = useEuiMemoizedStyles(euiPanelStyles);
-  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder, rest.onClick && styles.isClickable];
+  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder].concat(_toConsumableArray(highContrastMode ? [{
+    border: euiTheme.border.thin
+  }, borderColors[color]] : []), [rest.onClick && styles.isClickable]);
   var classes = classNames('euiPanel', "euiPanel--".concat(color), _defineProperty({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {
     return ___EmotionJSX("button", _extends({

package/es/components/panel/panel.styles.js

@@ -27,7 +27,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
     euiPanel: _ref2,
@@ -39,6 +40,7 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
       m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", highContrastMode ? // Use drop-shadow instead of box-shadow, as Windows high contrast themes ignores box-shadows
+    "filter: drop-shadow(0 ".concat(euiTheme.border.width.thick, " 0 ").concat(euiTheme.border.color, ");") : euiShadow(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };

package/es/components/panel/split_panel/split_panel.js

@@ -15,6 +15,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useIsWithinBreakpoints } from '../../../services/breakpoint';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiPanel } from '../panel';
 import { euiSplitPanelOuterStyles, euiSplitPanelInnerStyles } from './split_panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -27,6 +28,7 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiSplitPanel__inner', className);
+  var styles = useEuiMemoizedStyles(euiSplitPanelInnerStyles);
   var panelProps = {
     hasShadow: false,
     color: 'transparent',
@@ -36,7 +38,7 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
   return ___EmotionJSX(EuiPanel, _extends({
     element: "div",
     className: classes,
-    css: euiSplitPanelInnerStyles.euiSplitPanelInner
+    css: styles.euiSplitPanelInner
   }, panelProps, rest), children);
 };
 _EuiSplitPanelInner.propTypes = {

package/es/components/panel/split_panel/split_panel.styles.js

@@ -28,13 +28,9 @@ export var euiSplitPanelOuterStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
-export var euiSplitPanelInnerStyles = {
-  euiSplitPanelInner: process.env.NODE_ENV === "production" ? {
-    name: "1k62yu6-euiSplitPanelInner",
-    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;"
-  } : {
-    name: "1k62yu6-euiSplitPanelInner",
-    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+export var euiSplitPanelInnerStyles = function euiSplitPanelInnerStyles(_ref) {
+  var highContrastMode = _ref.highContrastMode;
+  return {
+    euiSplitPanelInner: /*#__PURE__*/css("flex-basis:0%;transform:none!important;box-shadow:none!important;", highContrastMode ? 'border: none;' : '', ";;label:euiSplitPanelInner;")
+  };
 };

package/es/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -7,19 +7,30 @@
  */
 
 import { css } from '@emotion/react';
-import { logicals, logicalSizeCSS } from '../../../global_styling';
+import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../global_styling';
 export var popoverArrowSize = 'm';
 export var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var borderColor = 'var(--euiPopoverBackgroundColor)';
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var arrowSize = euiTheme.size[popoverArrowSize];
+  var arrowDoubleSize = mathWithUnits(arrowSize, function (x) {
+    return x * 2;
+  });
+  var highContrastPseudoElement = function highContrastPseudoElement(css) {
+    return highContrastMode ? "&::before {".concat(css, "}") : '';
+  };
+  var highContrastBorderAffordance = mathWithUnits(euiTheme.border.width.thin, function (x) {
+    return x * -2;
+  });
   return {
     // Base
-    euiPopoverArrow: /*#__PURE__*/css("position:absolute;", logicalSizeCSS(0, 0), "&::before{content:'';position:absolute;", logicalSizeCSS(0, 0), ";};label:euiPopoverArrow;"),
+    euiPopoverArrow: /*#__PURE__*/css("position:absolute;background-color:var(--euiPopoverBackgroundColor);", highContrastPseudoElement("\n        content: '';\n        position: absolute;\n        background-color: inherit;\n        border: ".concat(euiTheme.border.thin, ";\n        transform: rotate(45deg);\n        transform-origin: top;\n        ").concat(logicalSizeCSS(mathWithUnits(arrowDoubleSize, function (x) {
+      return x * 0.75;
+    })), "\n      ")), ";;label:euiPopoverArrow;"),
     // POSITIONS
-    top: /*#__PURE__*/css("&::before{", logicals.bottom, ":-", arrowSize, ";", logicals['border-left'], ":", arrowSize, " solid transparent;", logicals['border-right'], ":", arrowSize, " solid transparent;", logicals['border-top'], ":", arrowSize, " solid ", borderColor, ";};label:top;"),
-    bottom: /*#__PURE__*/css("&::before{", logicals.top, ":-", arrowSize, ";", logicals['border-left'], ":", arrowSize, " solid transparent;", logicals['border-right'], ":", arrowSize, " solid transparent;", logicals['border-bottom'], ":", arrowSize, " solid ", borderColor, ";};label:bottom;"),
-    left: /*#__PURE__*/css("&::before{", logicals.top, ":50%;", logicals.right, ":-", arrowSize, ";", logicals['border-top'], ":", arrowSize, " solid transparent;", logicals['border-bottom'], ":", arrowSize, " solid transparent;", logicals['border-left'], ":", arrowSize, " solid ", borderColor, ";};label:left;"),
-    right: /*#__PURE__*/css("&::before{", logicals.top, ":50%;", logicals.left, ":-", arrowSize, ";", logicals['border-top'], ":", arrowSize, " solid transparent;", logicals['border-bottom'], ":", arrowSize, " solid transparent;", logicals['border-right'], ":", arrowSize, " solid ", borderColor, ";};label:right;")
+    top: /*#__PURE__*/css("clip-path:polygon(0 0, 50% 100%, 100% 0);", logicalSizeCSS(arrowDoubleSize, arrowSize), " ", logicalCSS('margin-top', highContrastMode ? highContrastBorderAffordance : 0), " ", highContrastPseudoElement("\n        ".concat(logicalCSS('top', '-60%'), "\n        ").concat(logicalCSS('left', '38%'), "\n      ")), ";;label:top;"),
+    bottom: /*#__PURE__*/css("clip-path:polygon(0 100%, 50% 0, 100% 100%);", logicalSizeCSS(arrowDoubleSize, arrowSize), " ", logicalCSS('margin-top', "-".concat(arrowSize)), " ", highContrastPseudoElement("\n        ".concat(logicalCSS('top', '54%'), "\n        ").concat(logicalCSS('left', '38%'), "\n      ")), ";;label:bottom;"),
+    left: /*#__PURE__*/css("clip-path:polygon(0 0, 100% 50%, 0 100%);", logicalSizeCSS(arrowSize, arrowDoubleSize), " ", logicalCSS('margin-left', highContrastMode ? highContrastBorderAffordance : 0), " ", highContrastPseudoElement("\n        ".concat(logicalCSS('top', '24%'), "\n        ").concat(logicalCSS('left', '-30%'), "\n      ")), ";;label:left;"),
+    right: /*#__PURE__*/css("clip-path:polygon(100% 0, 0 50%, 100% 100%);", logicalSizeCSS(arrowSize, arrowDoubleSize), " ", logicalCSS('margin-left', "-".concat(arrowSize)), " ", highContrastPseudoElement("\n        ".concat(logicalCSS('top', '24%'), "\n        ").concat(logicalCSS('left', '90%'), "\n      ")), ";;label:right;")
   };
 };