@elastic/eui 107.0.1 → 109.0.0

package/optimize/es/components/filter_group/filter_button.styles.js

@@ -8,21 +8,19 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../services';
-import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate, highContrastModeStyles, preventForcedColors, euiButtonEmptyColor } from '../../global_styling';
+import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate, highContrastModeStyles, preventForcedColors } from '../../global_styling';
 import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports';
 import { euiFormVariables } from '../form/form.styles';
 export var euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: mathWithUnits(euiTheme.size.base, function (x) {
-      return x * (isRefreshVariant ? 2.75 : 3);
+      return x * 2.75;
     })
   };
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "jkp921-noGrow",
   styles: "flex-grow:0;label:noGrow;"
 } : {
@@ -32,46 +30,30 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
-  var _euiFormVariables = euiFormVariables(euiThemeContext),
-    controlHeight = _euiFormVariables.controlHeight,
-    borderColor = _euiFormVariables.borderColor;
   var selectedSelector = '.euiFilterButton-isSelected';
-  var border = "".concat(euiTheme.border.width.thin, " solid ").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(logicalCSS('right', '100%'), "\n      ").concat(logicalCSS('vertical', 0), "\n      ").concat(logicalCSS('border-left', border), "\n    }\n  ");
-  // Bottom borders are needed for responsive flex-wrap behavior
-  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('top', '100%'), "\n      ").concat(logicalCSS('horizontal', 0), "\n      ").concat(logicalCSS('border-bottom', border), "\n    }\n  ");
-  var buttonStyles = isRefreshVariant ? "\n      ".concat(logicalCSS('width', '100%'), "\n\n      &:not(").concat(selectedSelector, ") {\n        &:hover,\n        &:active {\n          .euiFilterButton__notification[class*=\"subdued\"] {\n            background-color: ").concat(euiTheme.components.filterButtonBadgeBackgroundHover, "\n          }\n        }\n      }\n    ") : "\n      ".concat(logicalCSS('height', controlHeight), "\n      border-radius: 0;\n      ").concat(leftBorder, "\n      ").concat(bottomBorder, "\n\n      /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */\n      &:hover:not(:disabled),\n      &:focus:not(:disabled) {\n        /* Remove underline from whole button so notifications don't get the underline */\n        text-decoration: none;\n\n        .euiFilterButton__text {\n          /* And put it only on the actual text part */\n          text-decoration: underline;\n        }\n      }\n    ");
-  var toggleTypeStyles = isRefreshVariant ? "\n      ".concat(euiFilterButtonDisplay(euiThemeContext), ";\n\n      ").concat(highContrastModeStyles(euiThemeContext, {
-    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat(preventForcedColors(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n          }\n        ")
-  }), "\n    ") : "\n      font-weight: ".concat(euiTheme.font.weight.medium, ";\n      padding: 0;\n\n      &:is(").concat(selectedSelector, ") {\n        color: ").concat(euiButtonEmptyColor(euiThemeContext, 'text').color, ";\n        background-color: transparent;\n        font-weight: ").concat(euiTheme.font.weight.bold, ";\n      }\n    ");
-  var withNextSelector = isRefreshVariant ? '& + .euiFilterButton__wrapper' : '.euiFilterButton__wrapper:has(&) + .euiFilterButton__wrapper';
-  // handles display of borders between buttons
-  var withNextStyles = isRefreshVariant ? "\n      &::before {\n        border: none;\n      }\n\n      ".concat(cssSupportsHasWithNextSibling("\n          &:has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
+  var withNextSelector = '& + .euiFilterButton__wrapper';
   return {
-    euiFilterButton: /*#__PURE__*/css(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    euiFilterButton: /*#__PURE__*/css("position:relative;", logicalCSS('width', '100%'), " &:not(", selectedSelector, "){&:hover,&:active{.euiFilterButton__notification[class*='subdued']{background-color:", euiTheme.components.filterButtonBadgeBackgroundHover, ";}}};label:euiFilterButton;"),
     buttonType: {
-      default: /*#__PURE__*/css(isRefreshVariant && "\n          border-radius: 0;\n\n          &:focus-visible {\n            z-index: 1;\n            outline-offset: -".concat(euiTheme.border.width.thick, ";\n            border-radius: ").concat(euiTheme.border.radius.small, ";\n            transition: none;\n          }\n        "), ";;label:default;"),
-      toggle: /*#__PURE__*/css("&:focus-visible{outline-offset:", mathWithUnits(euiTheme.focus.width, function (x) {
-        return isRefreshVariant ? x / 2 : x * -1;
-      }), ";}", toggleTypeStyles, ";;label:toggle;")
+      default: /*#__PURE__*/css("border-radius:0;&:focus-visible{z-index:1;outline-offset:-", euiTheme.border.width.thick, ";border-radius:", euiTheme.border.radius.small, ";transition:none;};label:default;"),
+      toggle: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " &:focus-visible{outline-offset:", mathWithUnits(euiTheme.focus.width, function (x) {
+        return x / 2;
+      }), ";}", highContrastModeStyles(euiThemeContext, {
+        forced: "\n            &:is(".concat(selectedSelector, ") {\n              ").concat(preventForcedColors(euiThemeContext), "\n                color: ").concat(euiTheme.colors.emptyShade, ";\n                background-color: ").concat(euiTheme.colors.fullShade, ";\n            }\n          ")
+      }), ";;label:toggle;")
     },
-    withNext: /*#__PURE__*/css(withNextSelector, "{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
-    noGrow: _ref3,
+    withNext: /*#__PURE__*/css(withNextSelector, "{", cssSupportsHasWithNextSibling("\n            &:has(+ :not(&)) {\n              ".concat(logicalCSS('padding-right', '0'), "\n            }\n          ")), ";", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), "&::before{border:none;}};label:withNext;"),
+    noGrow: _ref4,
     hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/css("font-weight:", isRefreshVariant ? euiTheme.font.weight.medium : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";;label:hasActiveFilters;")
   };
 };
 export var euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
-  var _euiFormVariables2 = euiFormVariables(euiThemeContext),
-    borderColor = _euiFormVariables2.borderColor;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    borderColor = _euiFormVariables.borderColor;
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
 
   // Pseudo elements create borders without affecting width. We also prefer them
@@ -80,8 +62,8 @@ export var euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat(logicalCSS('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
   return {
-    wrapper: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", logicalCSS('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
-    hasToggle: /*#__PURE__*/css(logicalCSS('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), cssSupportsHasWithNextSibling("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
+    wrapper: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", leftBorder, " ", bottomBorder, " ", logicalCSS('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/css(logicalCSS('padding-horizontal', euiTheme.border.width.thin), cssSupportsHasWithNextSibling("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -100,18 +82,25 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "kc7mgj-euiFilterButton__content",
+  styles: ".euiThemeProvider{display:inline-flex;};label:euiFilterButton__content;"
+} : {
+  name: "kc7mgj-euiFilterButton__content",
+  styles: ".euiThemeProvider{display:inline-flex;};label:euiFilterButton__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/css(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
+      euiFilterButton__content: _ref3,
       hasIcon: /*#__PURE__*/css("&>.euiIcon:last-child{", logicalCSS('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
-        return x * (isRefreshVariant ? 2 : 3);
+        return x * 2;
       })), ";;label:hasNotification;")
     },
     notification: {

package/optimize/es/components/filter_group/filter_group.styles.js

@@ -8,9 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
-import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form/form.styles';
 import { euiFilterButtonDisplay } from './filter_button.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -23,31 +21,23 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     backgroundColor = _euiFormVariables.backgroundColor,
-    borderColor = _euiFormVariables.borderColor,
-    controlBorderRadius = _euiFormVariables.controlBorderRadius,
     controlHeight = _euiFormVariables.controlHeight,
-    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
-  var borderRadius = isRefreshVariant ? euiTheme.border.radius.small : controlBorderRadius;
-  var borderRadiusCompressed = isRefreshVariant ? euiTheme.border.radius.small : controlCompressedBorderRadius;
-  var borderStyle = isRefreshVariant ? "\n      /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons.\n      Uses ::after to ensure overlap and prevents blocking by setting pointer-events: none */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    ") : "\n      ".concat(highContrastModeStyles(euiThemeContext, {
-    none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-    forced: "border: ".concat(euiTheme.border.thin, ";")
-  }), "\n    ");
+  var borderRadius = euiTheme.border.radius.small;
+  var borderRadiusCompressed = euiTheme.border.radius.small;
   return {
-    euiFilterGroup: /*#__PURE__*/css(isRefreshVariant && "position: relative;", " display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;", isRefreshVariant && "\n          .euiPopover:focus-within {\n            z-index: 1;\n          }\n            \n          .euiFilterButton__wrapper {\n            flex-grow: 1;\n          }\n        ", ";.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css("position:relative;display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}>*:not(.euiFilterButton__wrapper, .euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiPopover:focus-within{z-index:1;}.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
-    uncompressed: /*#__PURE__*/css("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", logicalCSS('height', controlHeight), ";}.euiFilterButton{", logicalCSS('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', mathWithUnits([controlHeight, euiTheme.size.xxs], function (x, y) {
+    uncompressed: /*#__PURE__*/css("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", logicalCSS('height', controlHeight), ";}.euiFilterButton{", logicalCSS('height', controlHeight), ";}.euiFilterButton-isToggle{", logicalCSS('height', mathWithUnits([controlHeight, euiTheme.size.xxs], function (x, y) {
       return x - 3 * y;
-    })), "\n        }\n      "), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/css("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", logicalCSS('height', isRefreshVariant ? mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+    })), ";};label:uncompressed;"),
+    compressed: /*#__PURE__*/css("border-radius:", borderRadiusCompressed, ";.euiFilterButton{", logicalCSS('height', mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
       return x - 2 * y;
-    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', mathWithUnits([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
+    })), ";}.euiFilterButton-isToggle{", logicalCSS('height', mathWithUnits([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
       return x - 3 * y;
-    })), "\n        }\n      "), ";;label:compressed;"),
+    })), ";};label:compressed;"),
     /**
      * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
      * A fixed width is required because of the shift in widths that can be caused
@@ -57,15 +47,4 @@ export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext)
       return x * 18;
     })), ";;label:euiFilterGroup__popoverPanel;")
   };
-};
-
-/**
- * Small util for manually rounding the borders of the first and last EuiFilterButtons
- * - this makes their focus rings appear nicely instead of being cutt off.
- * 2nd selector accounts for EuiFilterButtons nested within popover/tooltip wrappers.
- *
- * NOTE: Do not use `logicalShorthandCSS()` here, as that will cause single buttons to not be rounded
- */
-var buttonChildrenBorderRadii = function buttonChildrenBorderRadii(radiusSize) {
-  return "\n  > :first-child,\n  > :first-child .euiFilterButton {\n    ".concat(logicalCSS('border-top-left-radius', radiusSize), "\n    ").concat(logicalCSS('border-bottom-left-radius', radiusSize), "\n  }\n\n  > :last-child,\n  > :last-child .euiFilterButton {\n    ").concat(logicalCSS('border-top-right-radius', radiusSize), "\n    ").concat(logicalCSS('border-bottom-right-radius', radiusSize), "\n  }\n");
 };

package/optimize/es/components/form/field_number/field_number.styles.js

@@ -7,15 +7,12 @@
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiFormControlStyles } from '../form.styles';
 export var euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
   var colorMode = euiThemeContext.colorMode;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = euiFormControlStyles(euiThemeContext);
-  var invalidStyles = isRefreshVariant ? "\n      &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ) {\n          ".concat(formStyles.invalid, "\n        }\n    ") : "\n      /* Account for native validity detection as well via [aria-invalid=\"true\"] */\n      &:is(:invalid, [aria-invalid='true']) {\n        ".concat(formStyles.invalid, "\n      }\n    ");
   return {
-    euiFieldNumber: /*#__PURE__*/css(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";", invalidStyles, " &:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
+    euiFieldNumber: /*#__PURE__*/css(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";&:is(:invalid, [aria-invalid='true']):not(\n          .euiFormControlLayoutDelimited__input,\n          :focus\n        ){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

package/optimize/es/components/form/field_text/field_text.styles.js

@@ -7,14 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiFormControlStyles } from '../form.styles';
 export var euiFieldTextStyles = function euiFieldTextStyles(euiThemeContext) {
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = euiFormControlStyles(euiThemeContext);
-  var invalidStyles = isRefreshVariant ? "\n      &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ) {\n          ".concat(formStyles.invalid, "\n        }\n    ") : "\n      &:is(:invalid){\n        ".concat(formStyles.invalid, "\n      }\n    ");
   return {
-    euiFieldText: /*#__PURE__*/css(formStyles.shared, " ", invalidStyles, " &:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
+    euiFieldText: /*#__PURE__*/css(formStyles.shared, " &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

package/optimize/es/components/form/file_picker/file_picker.js

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { withEuiStylesMemoizer, htmlIdGenerator, RenderWithEuiTheme, isEuiThemeRefreshVariant } from '../../../services';
+import { withEuiStylesMemoizer, htmlIdGenerator } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { EuiProgress } from '../../progress';
 import { EuiIcon } from '../../icon';
@@ -101,117 +101,112 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
       var _this2 = this;
       var _ref = this.context,
         defaultFullWidth = _ref.defaultFullWidth;
-      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
-        return ___EmotionJSX(EuiI18n, {
-          token: "euiFilePicker.removeSelectedAriaLabel",
-          default: "Remove selected files"
-        }, function (removeSelectedAriaLabel) {
-          var _this2$props = _this2.props,
-            stylesMemoizer = _this2$props.stylesMemoizer,
-            id = _this2$props.id,
-            name = _this2$props.name,
-            initialPromptText = _this2$props.initialPromptText,
-            className = _this2$props.className,
-            disabled = _this2$props.disabled,
-            compressed = _this2$props.compressed,
-            onChange = _this2$props.onChange,
-            isInvalid = _this2$props.isInvalid,
-            _this2$props$fullWidt = _this2$props.fullWidth,
-            fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
-            isLoading = _this2$props.isLoading,
-            display = _this2$props.display,
-            rest = _objectWithoutProperties(_this2$props, _excluded);
-          var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
-          var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
-          var isOverridingInitialPrompt = _this2.state.promptText != null;
-          var normalFormControl = display === 'default';
-          var classes = classNames('euiFilePicker', {
-            'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
-            'euiFilePicker-isInvalid': isInvalid,
-            'euiFilePicker-isLoading': isLoading,
-            'euiFilePicker-hasFiles': isOverridingInitialPrompt
-          }, className);
-          var styles = stylesMemoizer(euiFilePickerStyles);
-          var cssStyles = [styles.euiFilePicker, fullWidth ? styles.fullWidth : styles.formWidth, _this2.state.isHoveringDrop && styles.isDroppingFile, isInvalid && !disabled && styles.invalid, isOverridingInitialPrompt && !disabled && styles.hasFiles, isLoading && styles.loading];
-          var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
-          var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat(_toConsumableArray(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
-          var iconStyles = [styles.icon.euiFilePicker__icon].concat(_toConsumableArray(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compresssed : styles.icon.uncompressed] : [styles.icon.large]));
-          var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
-          var clearButton;
-          if (isLoading && normalFormControl) {
-            // Override clear button with loading spinner if it is in loading state
-            clearButton = ___EmotionJSX(EuiLoadingSpinner, {
-              css: rightIconStyles,
-              className: "euiFilePicker__loadingSpinner",
+      return ___EmotionJSX(EuiI18n, {
+        token: "euiFilePicker.removeSelectedAriaLabel",
+        default: "Remove selected files"
+      }, function (removeSelectedAriaLabel) {
+        var _this2$props = _this2.props,
+          stylesMemoizer = _this2$props.stylesMemoizer,
+          id = _this2$props.id,
+          name = _this2$props.name,
+          initialPromptText = _this2$props.initialPromptText,
+          className = _this2$props.className,
+          disabled = _this2$props.disabled,
+          compressed = _this2$props.compressed,
+          onChange = _this2$props.onChange,
+          isInvalid = _this2$props.isInvalid,
+          _this2$props$fullWidt = _this2$props.fullWidth,
+          fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
+          isLoading = _this2$props.isLoading,
+          display = _this2$props.display,
+          rest = _objectWithoutProperties(_this2$props, _excluded);
+        var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
+        var isOverridingInitialPrompt = _this2.state.promptText != null;
+        var normalFormControl = display === 'default';
+        var classes = classNames('euiFilePicker', {
+          'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
+          'euiFilePicker-isInvalid': isInvalid,
+          'euiFilePicker-isLoading': isLoading,
+          'euiFilePicker-hasFiles': isOverridingInitialPrompt
+        }, className);
+        var styles = stylesMemoizer(euiFilePickerStyles);
+        var cssStyles = [styles.euiFilePicker, fullWidth ? styles.fullWidth : styles.formWidth, _this2.state.isHoveringDrop && styles.isDroppingFile, isInvalid && !disabled && styles.invalid, isOverridingInitialPrompt && !disabled && styles.hasFiles, isLoading && styles.loading];
+        var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
+        var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat(_toConsumableArray(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
+        var iconStyles = [styles.icon.euiFilePicker__icon].concat(_toConsumableArray(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compresssed : styles.icon.uncompressed] : [styles.icon.large]));
+        var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
+        var clearButton;
+        if (isLoading && normalFormControl) {
+          // Override clear button with loading spinner if it is in loading state
+          clearButton = ___EmotionJSX(EuiLoadingSpinner, {
+            css: rightIconStyles,
+            className: "euiFilePicker__loadingSpinner",
+            size: compressed ? 's' : 'm'
+          });
+        } else if (isOverridingInitialPrompt && !disabled) {
+          if (normalFormControl) {
+            clearButton = ___EmotionJSX(EuiFormControlLayoutClearButton, {
+              "aria-label": removeSelectedAriaLabel,
+              css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
+              className: "euiFilePicker__clearButton",
+              onClick: _this2.removeFiles,
               size: compressed ? 's' : 'm'
             });
-          } else if (isOverridingInitialPrompt && !disabled) {
-            if (normalFormControl) {
-              clearButton = ___EmotionJSX(EuiFormControlLayoutClearButton, {
-                "aria-label": removeSelectedAriaLabel,
-                css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
-                className: "euiFilePicker__clearButton",
-                onClick: _this2.removeFiles,
-                size: compressed ? 's' : 'm'
-              });
-            } else {
-              clearButton = ___EmotionJSX(EuiButtonEmpty, {
-                "aria-label": removeSelectedAriaLabel,
-                css: styles.euiFilePicker__clearButton,
-                className: "euiFilePicker__clearButton",
-                size: "xs",
-                onClick: _this2.removeFiles
-              }, ___EmotionJSX(EuiI18n, {
-                token: "euiFilePicker.removeSelected",
-                default: "Remove"
-              }));
-            }
           } else {
-            clearButton = null;
+            clearButton = ___EmotionJSX(EuiButtonEmpty, {
+              "aria-label": removeSelectedAriaLabel,
+              css: styles.euiFilePicker__clearButton,
+              className: "euiFilePicker__clearButton",
+              size: "xs",
+              onClick: _this2.removeFiles
+            }, ___EmotionJSX(EuiI18n, {
+              token: "euiFilePicker.removeSelected",
+              default: "Remove"
+            }));
           }
-          var loader = !normalFormControl && isLoading && ___EmotionJSX(EuiProgress, {
-            size: "xs",
-            color: "accent",
-            position: "absolute"
-          });
-
-          // Currently this tenary is a little complex, it'll be simplified once we remove Amsterdam
-          var iconColor = isInvalid ? 'danger' : disabled ? isRefreshVariant ? 'disabled' : 'subdued' : isRefreshVariant ? 'text' : 'primary';
-          return ___EmotionJSX("div", {
-            css: cssStyles,
-            className: classes
-          }, ___EmotionJSX(EuiValidatableControl, {
-            isInvalid: isInvalid
-          }, ___EmotionJSX("input", _extends({
-            type: "file",
-            id: id,
-            name: name,
-            css: inputStyles,
-            className: "euiFilePicker__input",
-            onChange: _this2.handleChange,
-            ref: function ref(input) {
-              _this2.fileInput = input;
-            },
-            onDragOver: _this2.showDrop,
-            onDragLeave: _this2.hideDrop,
-            onDrop: _this2.hideDrop,
-            disabled: disabled,
-            "aria-describedby": promptId
-          }, rest))), ___EmotionJSX("div", {
-            css: promptStyles,
-            className: "euiFilePicker__prompt",
-            id: promptId
-          }, ___EmotionJSX(EuiIcon, {
-            css: iconStyles,
-            className: "euiFilePicker__icon",
-            color: iconColor,
-            type: isInvalid ? 'alert' : isRefreshVariant && disabled ? 'minusInCircle' : 'importAction',
-            size: normalFormControl ? 'm' : 'l',
-            "aria-hidden": "true"
-          }), ___EmotionJSX("span", {
-            className: "euiFilePicker__promptText"
-          }, _this2.state.promptText || initialPromptText), clearButton, loader));
+        } else {
+          clearButton = null;
+        }
+        var loader = !normalFormControl && isLoading && ___EmotionJSX(EuiProgress, {
+          size: "xs",
+          color: "accent",
+          position: "absolute"
         });
+        var iconColor = isInvalid ? 'danger' : disabled ? 'disabled' : 'text';
+        return ___EmotionJSX("div", {
+          css: cssStyles,
+          className: classes
+        }, ___EmotionJSX(EuiValidatableControl, {
+          isInvalid: isInvalid
+        }, ___EmotionJSX("input", _extends({
+          type: "file",
+          id: id,
+          name: name,
+          css: inputStyles,
+          className: "euiFilePicker__input",
+          onChange: _this2.handleChange,
+          ref: function ref(input) {
+            _this2.fileInput = input;
+          },
+          onDragOver: _this2.showDrop,
+          onDragLeave: _this2.hideDrop,
+          onDrop: _this2.hideDrop,
+          disabled: disabled,
+          "aria-describedby": promptId
+        }, rest))), ___EmotionJSX("div", {
+          css: promptStyles,
+          className: "euiFilePicker__prompt",
+          id: promptId
+        }, ___EmotionJSX(EuiIcon, {
+          css: iconStyles,
+          className: "euiFilePicker__icon",
+          color: iconColor,
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          size: normalFormControl ? 'm' : 'l',
+          "aria-hidden": "true"
+        }), ___EmotionJSX("span", {
+          className: "euiFilePicker__promptText"
+        }, _this2.state.promptText || initialPromptText), clearButton, loader));
       });
     }
   }]);

package/optimize/es/components/form/file_picker/file_picker.styles.js

@@ -8,7 +8,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiCanAnimate, euiFontSize, euiTextTruncate, highContrastModeStyles, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiFormControlShowBackgroundLine, euiFormControlStyles, euiFormVariables } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -38,17 +37,16 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = euiFormControlStyles(euiThemeContext);
   var formVariables = euiFormVariables(euiThemeContext);
   var _euiFontSize = euiFontSize(euiThemeContext, 's'),
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
   return {
-    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : formVariables.borderHovered, ";--euiFormControlStateStyle:", highContrastMode && isRefreshVariant ? 'solid' : 'dashed', ";}&:focus-within{", highContrastModeStyles(euiThemeContext, {
+    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : euiTheme.colors.borderInteractiveFormsHoverProminent, ";--euiFormControlStateStyle:", highContrastMode ? 'solid' : 'dashed', ";}&:focus-within{", highContrastModeStyles(euiThemeContext, {
       forced: "\n              ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderFocused), "\n            ")
     }), ";};label:euiFilePicker;"),
-    isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", isRefreshVariant ? euiTheme.colors.borderStrongSuccess : euiTheme.colors.primary, ";", isRefreshVariant && "  \n        --euiFormControlStateStyle: ".concat(highContrastMode === 'forced' ? 'solid' : 'dashed', ";\n        background-color: ").concat(euiTheme.components.forms.backgroundDropping, "\n      "), ";;label:isDroppingFile;"),
+    isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;label:isDroppingFile;"),
     invalid: /*#__PURE__*/css("--euiFormControlStateColor:", formVariables.borderInvalid, ";&:hover{--euiFormControlStateColor:", formVariables.borderInvalidHovered, ";}", highContrastModeStyles(euiThemeContext, {
       forced: "\n          ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderInvalid), "\n        ")
     }), ";;label:invalid;"),
@@ -60,12 +58,12 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
     // The input is an invisible dropzone / button
     input: {
       euiFilePicker__input: _ref3,
-      largeInteractive: /*#__PURE__*/css("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:", isRefreshVariant ? '' : 'underline', ";", highContrastModeStyles(euiThemeContext, {
+      largeInteractive: /*#__PURE__*/css("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{", highContrastModeStyles(euiThemeContext, {
         forced: "\n                  text-decoration: underline;\n                "
-      }), ";}.euiFilePicker__icon{transform:scale(", isRefreshVariant ? 1.05 : 1.1, ");}}};label:largeInteractive;")
+      }), ";}.euiFilePicker__icon{transform:scale(1.05);}}};label:largeInteractive;")
     },
-    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", isRefreshVariant ? euiTheme.border.width.thin : euiTheme.border.width.thick, " var(--euiFormControlStateStyle, dashed) var(\n          --euiFormControlStateColor,\n          ", isRefreshVariant ? formVariables.borderColor : euiTheme.border.color, "\n        );", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
-    disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", euiTheme.colors.borderBaseProminent, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    disabled: /*#__PURE__*/css(formStyles.disabled, "--euiFormControlStateColor:transparent;;label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),