@elastic/eui 105.0.0 → 106.0.0

package/test-env/components/form/form_control_layout/form_control_layout.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormControlLayoutStyles = exports.euiFormControlLayoutSideNodeStyles = 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.styles");
@@ -16,14 +17,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1w10n1m-inGroup",
-  styles: "flex-grow:1;overflow:hidden;label:inGroup;"
-} : {
-  name: "1w10n1m-inGroup",
-  styles: "flex-grow:1;overflow:hidden;label:inGroup;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "1lbfa6m-euiFormControlLayout__childrenWrapper",
   styles: "position:relative;label:euiFormControlLayout__childrenWrapper;"
 } : {
@@ -31,11 +24,24 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:euiFormControlLayout__childrenWrapper;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "12dhv84-euiFormControlLayout",
+  styles: "position:relative;z-index:0;label:euiFormControlLayout;"
+} : {
+  name: "12dhv84-euiFormControlLayout",
+  styles: "position:relative;z-index:0;label:euiFormControlLayout;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = (0, _form.euiFormVariables)(euiThemeContext);
+  var groupStyles = "\n      /* use pseudo element for borders to prevent dimension changes and support nested elements better */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n\n      /* the filter group will use the form layout border instead */\n      .euiFilterGroup {\n        border-radius: 0;\n        /* creating extra space to prevent the focus indicator being cut off */\n        ").concat((0, _global_styling.logicalCSS)('padding-right', euiTheme.border.width.thin), "\n\n        &::after {\n          display: none;\n        }\n      }\n\n      .euiFilterButton__wrapper:first-of-type::before,\n      .euiFilterButton__wrapper::after {\n        display: none;\n      }\n  ");
+  var wrapperGroupStyles = "\n      > :first-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', '0'), "\n      }\n  ");
+  var prependOnlyStyles = "\n      > :last-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n      }\n  ");
+  var appendOnlyStyles = "\n      > :first-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n      }\n  ");
   return {
-    euiFormControlLayout: /*#__PURE__*/(0, _react.css)(";label:euiFormControlLayout;"),
+    euiFormControlLayout: _ref2,
     // Skip the css`` on the default height to avoid generating a className
     uncompressed: "\n      ".concat((0, _global_styling.logicalCSS)('height', form.controlHeight), "\n    "),
     compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', form.controlCompressedHeight), ";;label:compressed;"),
@@ -43,36 +49,41 @@ var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function e
     formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     group: {
-      group: /*#__PURE__*/(0, _react.css)("display:flex;align-items:stretch;border:", euiTheme.border.width.thin, " solid ", form.borderColor, ";background-color:", form.backgroundColor, ";overflow:hidden;>*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
+      group: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;align-items:stretch;border:", isRefreshVariant ? 'none' : "".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor), ";background-color:", form.backgroundColor, ";overflow:hidden;", isRefreshVariant && groupStyles, ">*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
       // Skipping css`` to avoid repeated compressed/uncompressed classNames
       uncompressed: "\n        border-radius: ".concat(form.controlBorderRadius, ";\n      "),
       compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      ")
     },
     children: {
-      euiFormControlLayout__childrenWrapper: _ref2,
-      inGroup: _ref,
-      prependOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";;label:prependOnly;"),
-      appendOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";;label:appendOnly;")
+      euiFormControlLayout__childrenWrapper: _ref,
+      inGroup: /*#__PURE__*/(0, _react.css)("flex-grow:1;overflow:hidden;", isRefreshVariant && wrapperGroupStyles, ";;label:inGroup;"),
+      prependOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), " ", isRefreshVariant && prependOnlyStyles, ";;label:prependOnly;"),
+      appendOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), " ", isRefreshVariant && appendOnlyStyles, ";;label:appendOnly;")
     }
   };
 };
 var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = (0, _form.euiFormVariables)(euiThemeContext);
   var uncompressedHeight = (0, _global_styling.mathWithUnits)([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
-    return x - y * 2;
+    return isRefreshVariant ? x : x - y * 2;
   });
   var compressedHeight = (0, _global_styling.mathWithUnits)([form.controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
-    return x - y * 2;
+    return isRefreshVariant ? x : x - y * 2;
   });
   var buttons = '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon)';
   var text = '*:is(.euiFormLabel, .euiText)';
+  var appendStyles = "\n    position: relative;\n    ".concat((0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-inline-start: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
+  var prependStyles = "\n    position: relative;\n    ".concat((0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      border-inline-end: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
   return {
-    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
+    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;line-height:1;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
     append: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "\n          ".concat(isRefreshVariant && appendStyles, "\n        "),
       preferred: (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin)
     }), ";label:append;"),
     prepend: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "\n          ".concat(isRefreshVariant && prependStyles, "\n        "),
       preferred: (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin)
     }), ";label:prepend;"),
     uncompressed: "\n      ".concat(text, " {\n        ").concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat((0, _global_styling.logicalCSS)('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat((0, _global_styling.logicalCSS)('width', euiTheme.size.xl), "\n      }\n    "),

package/test-env/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiFormControlLayoutClearButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _services = require("../../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,14 +15,13 @@ var _global_styling = require("../../../global_styling");
  * Side Public License, v 1.
  */
 
-var EuiFormControlLayoutClearButtonStyles = exports.EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode,
-    highContrastMode = _ref.highContrastMode;
-  var backgroundColor = colorMode === 'DARK' || highContrastMode // mediumShade is not sufficient WCAG contrast
-  ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
+var EuiFormControlLayoutClearButtonStyles = exports.EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  var backgroundColor = highContrastMode ? euiTheme.colors.darkShade : euiTheme.components.forms.clearButtonBackground;
   return {
-    euiFormControlLayoutClearButton: /*#__PURE__*/(0, _react.css)("pointer-events:all;display:flex;justify-content:center;align-items:center;border-radius:50%;border-style:solid;border-color:", backgroundColor, ";&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
+    euiFormControlLayoutClearButton: /*#__PURE__*/(0, _react.css)("pointer-events:all;display:flex;justify-content:center;align-items:center;border-radius:50%;border-style:solid;border-color:", backgroundColor, ";&:disabled{cursor:not-allowed;background-color:", isRefreshVariant ? euiTheme.colors.backgroundBaseDisabled : euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
     size: {
       s: "\n        ".concat((0, _global_styling.logicalSizeCSS)(euiTheme.size.m), "\n        border-width: ").concat((0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
         return x / 2;

package/test-env/components/form/form_control_layout/form_control_layout_delimited.js

@@ -37,6 +37,8 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
     className = _ref.className,
     _fullWidth = _ref.fullWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('formVariant');
   var _useFormContext = (0, _eui_form_context.useFormContext)(),
     defaultFullWidth = _useFormContext.defaultFullWidth;
   var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
@@ -49,7 +51,7 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
   });
   var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout_delimited.euiFormControlLayoutDelimitedStyles);
   var cssStyles = [styles.delimited, rest.isDisabled && styles.disabled, rest.readOnly && styles.readOnly];
-  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css];
+  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css, isRefreshVariant && rest.readOnly && styles.childrenWrapper.readOnly];
   return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
     isDelimited: true,
     css: cssStyles,
@@ -64,10 +66,10 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
     value: {
       defaultFullWidth: fullWidth
     }
-  }, startControl && addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
+  }, startControl && addClassesToControl(euiThemeContext, startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
     delimiter: delimiter,
     isInvalid: showInvalidState
-  }), endControl && addClassesToControl(endControl)));
+  }), endControl && addClassesToControl(euiThemeContext, endControl)));
 };
 EuiFormControlLayoutDelimited.propTypes = {
   /**
@@ -85,18 +87,19 @@ EuiFormControlLayoutDelimited.propTypes = {
   delimiter: _propTypes.default.node,
   className: _propTypes.default.string
 };
-var addClassesToControl = function addClassesToControl(control) {
+var addClassesToControl = function addClassesToControl(euiThemeContext, control) {
   return (0, _services.cloneElementWithCss)(control, {
-    css: _form_control_layout_delimited.euiFormControlLayoutDelimited__input,
+    css: (0, _form_control_layout_delimited.euiFormControlLayoutDelimited__input)(euiThemeContext),
     className: (0, _classnames.default)(control.props.className, 'euiFormControlLayoutDelimited__input')
   }, 'before');
 };
 var EuiFormControlDelimiter = function EuiFormControlDelimiter(_ref2) {
   var delimiter = _ref2.delimiter,
     isInvalid = _ref2.isInvalid;
+  var euiThemeContext = (0, _services.useEuiTheme)();
   var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiFormControlLayoutDelimited.delimiterLabel', 'to');
   return (0, _react2.jsx)(_text.EuiText, {
-    css: _form_control_layout_delimited.euiFormControlLayoutDelimited__delimiter,
+    css: (0, _form_control_layout_delimited.euiFormControlLayoutDelimited__delimiter)(euiThemeContext),
     className: "euiFormControlLayoutDelimited__delimiter",
     size: "s",
     color: isInvalid ? 'danger' : 'subdued'

package/test-env/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -5,52 +5,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelimitedStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _form = require("../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
  * 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.
  */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1o1b8cl-delimited",
-  styles: "display:flex;label:delimited;"
-} : {
-  name: "1o1b8cl-delimited",
-  styles: "display:flex;label:delimited;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
+
 var euiFormControlLayoutDelimitedStyles = exports.euiFormControlLayoutDelimitedStyles = function euiFormControlLayoutDelimitedStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  var invalidStyles = isRefreshVariant ? "\n    :not(.euiFormControlLayoutDelimited__input, .euiFormControlLayoutDelimited__delimiter) {\n      ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n    }\n\n    &:focus-within {\n      --euiFormControlStateColor: ").concat(form.borderColor, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderHovered, ";\n    }\n\n    .euiFormControlLayoutDelimited__input {\n      background-color: transparent;\n    }\n  ") : "\n    ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";\n  ");
+  var readOnlyStyles = "\n      & .euiFormControlLayoutDelimited__input {\n        outline: none;  \n        box-shadow: none;\n        --euiFormControlStateColor: transparent;\n      }\n    ";
+  var delimitedStyles = "\n      /* Transition smoothly between disabled/readOnly background color changes */\n      ".concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+    withBorder: isRefreshVariant && !highContrastMode ? true : false,
+    withBackground: false,
+    withBackgroundAnimation: isRefreshVariant ? false : true
+  }), "\n    ").trim();
+  var delimitedWrapperStyles = "\n    ".concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+    withBorder: !highContrastMode,
+    withBackground: false,
+    withBackgroundAnimation: true
+  }), "\n  \n    &:hover {\n      ").concat((0, _form.euiFormControlHoverStyles)(euiThemeContext), "\n      box-shadow: none;\n\n      /* using hover styling on wrapper instead of the children inputs */\n      .euiFormControlLayoutDelimited__input:not(:focus) {\n        outline: none;\n        background-color: transparent;\n      }\n    }\n\n    /* adjust for delimited behavior differing from default form layout */\n    > :first-child {\n      ").concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n    }\n\n    > :last-child {\n      ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n    }\n  ");
   return {
     // Appended onto existing `euiFormControlLayout` styles
-    delimited: /*#__PURE__*/(0, _react.css)(
-    // Transition smoothly between disabled/readOnly background color changes
-    (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
-      withBorder: false,
-      withBackground: false,
-      withBackgroundAnimation: true
-    }), ";label:delimited;"),
+    delimited: /*#__PURE__*/(0, _react.css)(delimitedStyles, ";label:delimited;"),
     disabled: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";label:disabled;"),
-    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), ";label:readOnly;"),
+    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), " ", isRefreshVariant && readOnlyStyles, ";;label:readOnly;"),
     // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
     childrenWrapper: {
-      delimited: _ref,
+      delimited: /*#__PURE__*/(0, _react.css)("display:flex;", isRefreshVariant && delimitedWrapperStyles, ";;label:delimited;"),
       invalid: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false,
         withBackgroundAnimation: false
-      }), (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";label:invalid;")
+      }), "\n          ".concat(invalidStyles, "\n        "), ";label:invalid;"),
+      readOnly: /*#__PURE__*/(0, _react.css)(";label:readOnly;")
     }
   };
 };
-var euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelimited__delimiter = process.env.NODE_ENV === "production" ? {
-  name: "14bhjql-euiFormControlLayoutDelimited__delimiter",
-  styles: "align-self:stretch;flex-grow:0;display:flex;align-items:center;line-height:1;label:euiFormControlLayoutDelimited__delimiter;"
-} : {
-  name: "14bhjql-euiFormControlLayoutDelimited__delimiter",
-  styles: "align-self:stretch;flex-grow:0;display:flex;align-items:center;line-height:1;label:euiFormControlLayoutDelimited__delimiter;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+var euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelimited__delimiter = function euiFormControlLayoutDelimited__delimiter(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  var experimentalStyles = isRefreshVariant && "\n      ".concat((0, _global_styling.logicalCSS)('padding-horizontal', (0, _global_styling.mathWithUnits)([euiTheme.size.xs, euiTheme.size.xxs], function (x, y) {
+    return x + y;
+  })), "\n  ");
+  return /*#__PURE__*/(0, _react.css)("display:flex;align-self:stretch;flex-grow:0;align-items:center;line-height:1;", experimentalStyles, ";;label:euiFormControlLayoutDelimited__delimiter;");
 };
-var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = /*#__PURE__*/(0, _react.css)("box-shadow:none;border:none;border-radius:0;text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");
+var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = function euiFormControlLayoutDelimited__input(euiThemeContext) {
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  return /*#__PURE__*/(0, _react.css)("box-shadow:none;border:none;border-radius:", isRefreshVariant ? '' : '0', ";text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");
+};

package/test-env/components/form/form_control_layout/form_control_layout_icons.js

@@ -86,11 +86,14 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       var iconRef = iconProps.ref,
         side = iconProps.side,
         iconRest = (0, _objectWithoutProperties2.default)(iconProps, _excluded);
-      return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, (0, _extends2.default)({
-        size: compressed ? 's' : 'm',
-        disabled: isDisabled,
-        iconRef: iconRef
-      }, iconRest));
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+        return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, (0, _extends2.default)({
+          size: compressed && !isRefreshVariant ? 's' : 'm',
+          disabled: isDisabled,
+          iconRef: iconRef
+        }, iconRest));
+      });
     }
   }, {
     key: "renderDropdownIcon",
@@ -102,10 +105,13 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       if (!isDropdown) {
         return null;
       }
-      return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
-        size: compressed ? 's' : 'm',
-        disabled: isDisabled,
-        type: "arrowDown"
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+        return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
+          size: compressed && !isRefreshVariant ? 's' : 'm',
+          disabled: isDisabled,
+          type: "arrowDown"
+        });
       });
     }
   }, {
@@ -117,8 +123,11 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       if (!isLoading) {
         return null;
       }
-      return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-        size: compressed ? 's' : 'm'
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+        return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+          size: compressed && !isRefreshVariant ? 's' : 'm'
+        });
       });
     }
   }, {
@@ -131,10 +140,13 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       if (!clear) {
         return null;
       }
-      return (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, (0, _extends2.default)({
-        size: compressed ? 's' : 'm',
-        disabled: isDisabled
-      }, clear));
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+        return (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, (0, _extends2.default)({
+          size: compressed && !isRefreshVariant ? 's' : 'm',
+          disabled: isDisabled
+        }, clear));
+      });
     }
   }, {
     key: "renderInvalidIcon",
@@ -145,10 +157,13 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       if (!isInvalid) {
         return null;
       }
-      return (0, _react2.jsx)(_icon.EuiIcon, {
-        size: compressed ? 's' : 'm',
-        color: "danger",
-        type: "warning"
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+        return (0, _react2.jsx)(_icon.EuiIcon, {
+          size: compressed && !isRefreshVariant ? 's' : 'm',
+          color: "danger",
+          type: "warning"
+        });
       });
     }
   }]);

package/test-env/components/form/form_control_layout/form_control_layout_icons.styles.js

@@ -15,11 +15,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "3lf9c4-euiFormControlLayoutIcons",
-  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;"
+  name: "oaqulw-euiFormControlLayoutIcons",
+  styles: "position:relative;z-index:1;display:flex;align-items:center;pointer-events:none;label:euiFormControlLayoutIcons;"
 } : {
-  name: "3lf9c4-euiFormControlLayoutIcons",
-  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;",
+  name: "oaqulw-euiFormControlLayoutIcons",
+  styles: "position:relative;z-index:1;display:flex;align-items:center;pointer-events:none;label:euiFormControlLayoutIcons;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
@@ -42,11 +42,11 @@ var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles =
       absolute: {
         absolute: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), ";;label:absolute;"),
         uncompressed: {
-          left: /*#__PURE__*/(0, _react.css)("z-index:1;", (0, _global_styling.logicalCSS)('left', controlPadding), ";;label:left;"),
+          left: /*#__PURE__*/(0, _react.css)("z-index:2;", (0, _global_styling.logicalCSS)('left', controlPadding), ";;label:left;"),
           right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', controlPadding), ";;label:right;")
         },
         compressed: {
-          left: /*#__PURE__*/(0, _react.css)("z-index:1;", (0, _global_styling.logicalCSS)('left', controlCompressedPadding), ";;label:left;"),
+          left: /*#__PURE__*/(0, _react.css)("z-index:2;", (0, _global_styling.logicalCSS)('left', controlCompressedPadding), ";;label:left;"),
           right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', controlCompressedPadding), ";;label:right;")
         }
       },

package/test-env/components/form/form_error_text/form_error_text.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormErrorTextStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,7 +17,8 @@ var _global_styling = require("../../../global_styling");
 
 var euiFormErrorTextStyles = exports.euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   return {
-    euiFormErrorText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.danger, ";;label:euiFormErrorText;")
+    euiFormErrorText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:euiFormErrorText;")
   };
 };

package/test-env/components/form/form_label/form_label.styles.js

@@ -8,6 +8,7 @@ exports.euiFormLabelStyles = exports.euiFormLabel = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _serialize = require("@emotion/serialize");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _title = require("../../title/title.styles");
 var _excluded = ["fontWeight"];
@@ -31,13 +32,14 @@ var euiFormLabel = exports.euiFormLabel = function euiFormLabel(euiThemeContext)
 };
 var euiFormLabelStyles = exports.euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   return {
     euiFormLabel: /*#__PURE__*/(0, _react.css)(euiFormLabel(euiThemeContext), " display:inline-block;", _global_styling.euiCanAnimate, "{transition:color ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiFormLabel;"),
     // Skip css`` to avoid generating an extra Emotion className
     // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
     notDisabled: "\n      &:where([for]) {\n        cursor: pointer;\n      }\n    ",
-    invalid: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.danger, ";;label:invalid;"),
+    invalid: /*#__PURE__*/(0, _react.css)("color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:invalid;"),
     // Focused state should override invalid state
-    focused: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primary, ";;label:focused;")
+    focused: /*#__PURE__*/(0, _react.css)("color:", isRefreshVariant ? '' : euiTheme.colors.primary, ";;label:focused;")
   };
 };

package/test-env/components/header/header.styles.js

@@ -54,6 +54,7 @@ var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThem
 var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = euiTheme.components.headerDarkBackground;
@@ -64,8 +65,9 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
     borderColor: euiTheme.components.headerDarkSearchBorderColor,
     placeholderColor: (0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor)
   };
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(
+  var formLayoutStyles = "\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(
   // the header is in a faux dark mode, we can't rely on color
   // switch tokens as they'd be in the wrong color mode
-  highContrastMode ? euiTheme.colors.plainLight : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &__append {\n        border-color: ").concat(highContrastMode ? euiTheme.colors.plainLight : '', "\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  highContrastMode ? euiTheme.colors.plainLight : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &__append {\n        border-color: ").concat(highContrastMode ? euiTheme.colors.plainLight : '', "\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n  }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    ").concat(!isRefreshVariant && formLayoutStyles, " \n  ");
 };

package/test-env/components/markdown_editor/markdown_editor_drop_zone.styles.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiMarkdownEditorDropZoneStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _markdown_editor = require("./markdown_editor.styles");
+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
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,13 +26,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiMarkdownEditorDropZoneStyles = exports.euiMarkdownEditorDropZoneStyles = function euiMarkdownEditorDropZoneStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
     minHeight = _euiMarkdownEditorVar.minHeight;
   return {
     euiMarkdownEditorDropZone: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-direction:column;", (0, _global_styling.logicalCSS)('min-height', minHeight), ";;label:euiMarkdownEditorDropZone;"),
-    isDragging: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", euiTheme.colors.backgroundTransparentPrimary, "!important;};label:isDragging;"),
-    isDraggingError: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", euiTheme.colors.backgroundTransparentDanger, "!important;};label:isDraggingError;"),
-    hasError: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorTextArea{--euiFormControlStateColor:", euiTheme.colors.danger, "!important;background-size:100% 100%;};label:hasError;"),
+    isDragging: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", isRefreshVariant ? euiTheme.colors.backgroundBasePrimary : euiTheme.colors.backgroundTransparentPrimary, "!important;};label:isDragging;"),
+    isDraggingError: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", isRefreshVariant ? euiTheme.colors.backgroundBaseDanger : euiTheme.colors.backgroundTransparentDanger, "!important;};label:isDraggingError;"),
+    hasError: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorTextArea{--euiFormControlStateColor:", euiTheme.colors.danger, ";background-size:100% 100%;", isRefreshVariant && (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:hasError;"),
     euiMarkdownEditorDropZone__input: _ref
   };
 };

package/test-env/components/progress/progress.a11y.js

@@ -75,13 +75,13 @@ describe('EuiProgress', function () {
       cy.checkAxe();
     });
     it('displays correct progress values and labels', function () {
-      cy.get('div[data-test-subj="cy-progress-1"] span.euiProgress__valueText').contains('0');
-      cy.get('div[data-test-subj="cy-progress-2"] span.euiProgress__valueText').contains('33');
-      cy.get('div[data-test-subj="cy-progress-3"] span.euiProgress__valueText').contains('66');
-      cy.get('div[data-test-subj="cy-progress-4"] span.euiProgress__valueText').contains('100');
-      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__label').contains('Basic percentage');
-      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__valueText').contains('100');
-      cy.get('div[data-test-subj="cy-progress-infinite"] span.euiProgress__valueText').should('not.exist');
+      cy.get('div[data-test-subj="cy-progress-1"] div.euiProgress__valueText').contains('0');
+      cy.get('div[data-test-subj="cy-progress-2"] div.euiProgress__valueText').contains('33');
+      cy.get('div[data-test-subj="cy-progress-3"] div.euiProgress__valueText').contains('66');
+      cy.get('div[data-test-subj="cy-progress-4"] div.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-5"] div.euiProgress__label').contains('Basic percentage');
+      cy.get('div[data-test-subj="cy-progress-5"] div.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-infinite"] div.euiProgress__valueText').should('not.exist');
     });
   });
 });

package/test-env/components/progress/progress.js

@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("../i18n");
-var _inner_text = require("../inner_text");
 var _predicate = require("../../services/predicate");
 var _services = require("../../services");
 var _accessibility = require("../accessibility");
@@ -102,34 +101,26 @@ var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
     return (0, _react2.jsx)(_react.default.Fragment, null, label || valueText ? (0, _react2.jsx)("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
-    }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (_ref2, innerText) {
-      return (0, _react2.jsx)("span", (0, _extends2.default)({
-        title: innerText,
-        ref: function ref(node) {
-          labelRef.current = node;
-          _ref2 === null || _ref2 === void 0 || _ref2(node);
-        }
-      }, labelProps, {
-        className: labelClasses,
-        css: labelCssStyles,
-        "aria-hidden": "true"
-      }), label);
-    }), valueRender && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (_ref3, innerText) {
-      return (0, _react2.jsx)("span", {
-        title: innerText,
-        ref: function ref(node) {
-          valueTextRef.current = node;
-          _ref3 === null || _ref3 === void 0 || _ref3(node);
-        },
-        style: customTextColorStyles,
-        css: valueTextCssStyles,
-        className: "euiProgress__valueText",
-        "aria-hidden": "true"
-      }, valueRender);
-    })) : undefined, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", {
+    }, label && (0, _react2.jsx)("div", (0, _extends2.default)({
+      ref: function ref(node) {
+        labelRef.current = node;
+      }
+    }, labelProps, {
+      className: labelClasses,
+      css: labelCssStyles,
+      "aria-hidden": "true"
+    }), label), valueRender && (0, _react2.jsx)("div", {
+      ref: function ref(node) {
+        valueTextRef.current = node;
+      },
+      style: customTextColorStyles,
+      css: valueTextCssStyles,
+      className: "euiProgress__valueText",
+      "aria-hidden": "true"
+    }, valueRender)) : undefined, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", {
       "aria-live": "polite",
       "aria-atomic": "true"
-    }, (0, _react2.jsx)("span", null, label && "".concat(label, " "), valueRender || value))), (0, _react2.jsx)("progress", (0, _extends2.default)({
+    }, (0, _react2.jsx)("span", null, label && (0, _react2.jsx)(_react.default.Fragment, null, labelText, " "), valueRender || value))), (0, _react2.jsx)("progress", (0, _extends2.default)({
       css: cssStyles,
       className: classes,
       style: customColorStyles,