@elastic/eui 107.0.1 → 109.0.0

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

@@ -5,7 +5,6 @@ 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");
@@ -34,12 +33,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 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        border-radius: inherit;\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        border-radius: inherit;\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: _ref2,
     // Skip the css`` on the default height to avoid generating a className
@@ -49,41 +43,34 @@ 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)("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, " .euiFormControlButton{border-radius:inherit;box-shadow:none;}>*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
+      group: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;align-items:stretch;border:none;background-color:", form.backgroundColor, ";overflow:hidden;&::after{content:'';position:absolute;inset:0;z-index:0;border:", euiTheme.border.width.thin, " solid ", form.borderColor, ";border-radius:inherit;pointer-events:none;}.euiFilterGroup{border-radius:0;", (0, _global_styling.logicalCSS)('padding-right', euiTheme.border.width.thin), " &::after{display:none;}}.euiFilterButton__wrapper:first-of-type::before,.euiFilterButton__wrapper::after{display:none;}.euiFormControlButton{border-radius:inherit;box-shadow:none;}>*{", (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: _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;")
+      inGroup: /*#__PURE__*/(0, _react.css)("flex-grow:1;overflow:hidden;>:first-child{border-radius:inherit;", (0, _global_styling.logicalCSS)('border-top-left-radius', '0'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', '0'), ";}>:last-child{border-radius:inherit;", (0, _global_styling.logicalCSS)('border-top-right-radius', '0'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', '0'), ";};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'), ">:last-child{", (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'), ">:first-child{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";};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 isRefreshVariant ? x : x - y * 2;
-  });
-  var compressedHeight = (0, _global_styling.mathWithUnits)([form.controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
-    return isRefreshVariant ? x : x - y * 2;
-  });
+  var uncompressedHeight = form.controlHeight;
+  var compressedHeight = form.controlCompressedHeight;
   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;"),
     append: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: "\n          ".concat(isRefreshVariant && appendStyles, "\n        "),
+      none: "\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        "),
       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        "),
+      none: "\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        "),
       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/lib/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -6,7 +6,6 @@ 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
@@ -18,10 +17,9 @@ var _services = require("../../../services");
 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:", isRefreshVariant ? euiTheme.colors.backgroundBaseDisabled : 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:", euiTheme.colors.backgroundBaseDisabled, ";};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/lib/components/form/form_control_layout/form_control_layout_delimited.js

@@ -41,8 +41,6 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
     className = _ref.className,
     _fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_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;
@@ -55,7 +53,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, isRefreshVariant && rest.readOnly && styles.childrenWrapper.readOnly];
+  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css, rest.readOnly && styles.childrenWrapper.readOnly];
   return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, _extends({
     isDelimited: true,
     css: cssStyles,
@@ -70,10 +68,10 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
     value: {
       defaultFullWidth: fullWidth
     }
-  }, startControl && addClassesToControl(euiThemeContext, startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
+  }, startControl && addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
     delimiter: delimiter,
     isInvalid: showInvalidState
-  }), endControl && addClassesToControl(euiThemeContext, endControl)));
+  }), endControl && addClassesToControl(endControl)));
 };
 EuiFormControlLayoutDelimited.propTypes = {
   /**
@@ -91,9 +89,9 @@ EuiFormControlLayoutDelimited.propTypes = {
   delimiter: _propTypes.default.node,
   className: _propTypes.default.string
 };
-var addClassesToControl = function addClassesToControl(euiThemeContext, control) {
+var addClassesToControl = function addClassesToControl(control) {
   return (0, _services.cloneElementWithCss)(control, {
-    css: (0, _form_control_layout_delimited.euiFormControlLayoutDelimited__input)(euiThemeContext),
+    css: _form_control_layout_delimited.euiFormControlLayoutDelimited__input,
     className: (0, _classnames.default)(control.props.className, 'euiFormControlLayoutDelimited__input')
   }, 'before');
 };

package/lib/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -5,7 +5,6 @@ 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");
 /*
@@ -18,46 +17,34 @@ var _form = require("../form.styles");
 
 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
+    withBorder: !highContrastMode ? true : false,
+    withBackground: false
   }), "\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)(delimitedStyles, ";label:delimited;"),
     disabled: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";label:disabled;"),
-    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), " ", isRefreshVariant && readOnlyStyles, ";;label:readOnly;"),
+    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), " & .euiFormControlLayoutDelimited__input{--euiFormControlStateColor:transparent;outline:none;box-shadow:none;};label:readOnly;"),
     // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
     childrenWrapper: {
-      delimited: /*#__PURE__*/(0, _react.css)("display:flex;", isRefreshVariant && delimitedWrapperStyles, ";;label:delimited;"),
+      delimited: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: !highContrastMode,
+        withBackground: false
+      }), " &:hover{", (0, _form.euiFormControlHoverStyles)(euiThemeContext), " box-shadow:none;.euiFormControlLayoutDelimited__input:not(:focus){outline:none;background-color:transparent;}}>:first-child{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";}>:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:delimited;"),
       invalid: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
-        withBackgroundColor: false,
-        withBackgroundAnimation: false
-      }), "\n          ".concat(invalidStyles, "\n        "), ";label:invalid;"),
+        withBackgroundColor: false
+      }), "\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        "), ";label:invalid;"),
       readOnly: /*#__PURE__*/(0, _react.css)(";label:readOnly;")
     }
   };
 };
 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 /*#__PURE__*/(0, _react.css)("display:flex;align-self:stretch;flex-grow:0;align-items:center;line-height:1;", (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;");
+  })), ";;label:euiFormControlLayoutDelimited__delimiter;");
 };
-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;");
-};
+var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = /*#__PURE__*/(0, _react.css)("box-shadow:none;border:none;text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

package/lib/components/form/form_control_layout/form_control_layout_icons.js

@@ -84,7 +84,6 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
     value: function renderCustomIcon() {
       var _this$props2 = this.props,
         icon = _this$props2.icon,
-        compressed = _this$props2.compressed,
         isDisabled = _this$props2.isDisabled;
       if (!icon) {
         return null;
@@ -97,84 +96,63 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       var iconRef = iconProps.ref,
         side = iconProps.side,
         iconRest = _objectWithoutProperties(iconProps, _excluded);
-      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, _extends({
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled,
-          iconRef: iconRef
-        }, iconRest));
-      });
+      return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, _extends({
+        size: "m",
+        disabled: isDisabled,
+        iconRef: iconRef
+      }, iconRest));
     }
   }, {
     key: "renderDropdownIcon",
     value: function renderDropdownIcon() {
       var _this$props3 = this.props,
         isDropdown = _this$props3.isDropdown,
-        compressed = _this$props3.compressed,
         isDisabled = _this$props3.isDisabled;
       if (!isDropdown) {
         return null;
       }
-      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"
-        });
+      return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
+        size: "m",
+        disabled: isDisabled,
+        type: "arrowDown"
       });
     }
   }, {
     key: "renderLoadingSpinner",
     value: function renderLoadingSpinner() {
-      var _this$props4 = this.props,
-        isLoading = _this$props4.isLoading,
-        compressed = _this$props4.compressed;
+      var isLoading = this.props.isLoading;
       if (!isLoading) {
         return null;
       }
-      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'
-        });
+      return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+        size: "m"
       });
     }
   }, {
     key: "renderClearButton",
     value: function renderClearButton() {
-      var _this$props5 = this.props,
-        clear = _this$props5.clear,
-        compressed = _this$props5.compressed,
-        isDisabled = _this$props5.isDisabled;
+      var _this$props4 = this.props,
+        clear = _this$props4.clear,
+        isDisabled = _this$props4.isDisabled;
       if (!clear) {
         return null;
       }
-      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, _extends({
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled
-        }, clear));
-      });
+      return (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, _extends({
+        size: "m",
+        disabled: isDisabled
+      }, clear));
     }
   }, {
     key: "renderInvalidIcon",
     value: function renderInvalidIcon() {
-      var _this$props6 = this.props,
-        isInvalid = _this$props6.isInvalid,
-        compressed = _this$props6.compressed;
+      var isInvalid = this.props.isInvalid;
       if (!isInvalid) {
         return null;
       }
-      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"
-        });
+      return (0, _react2.jsx)(_icon.EuiIcon, {
+        size: "m",
+        color: "danger",
+        type: "warning"
       });
     }
   }]);

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

@@ -5,7 +5,6 @@ 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
@@ -17,8 +16,7 @@ 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:", isRefreshVariant ? euiTheme.colors.textDanger : 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:", euiTheme.colors.textDanger, ";;label:euiFormErrorText;")
   };
 };

package/lib/components/form/form_label/form_label.js

@@ -32,7 +32,7 @@ var EuiFormLabel = exports.EuiFormLabel = function EuiFormLabel(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_form_label.euiFormLabelStyles);
-  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid];
   var classes = (0, _classnames.default)('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiFormLabelStyles = exports.euiFormLabel = void 0;
 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"];
@@ -32,14 +31,11 @@ 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:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:invalid;"),
-    // Focused state should override invalid state
-    focused: /*#__PURE__*/(0, _react.css)("color:", isRefreshVariant ? '' : euiTheme.colors.primary, ";;label:focused;")
+    invalid: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:invalid;")
   };
 };

package/lib/components/form/range/range_input.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiRangeInputStyles = void 0;
 var _react = require("@emotion/react");
-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
@@ -16,8 +15,7 @@ var _services = require("../../../services");
 
 var euiRangeInputStyles = exports.euiRangeInputStyles = function euiRangeInputStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   return {
-    euiRangeInput: /*#__PURE__*/(0, _react.css)("inline-size:auto;min-inline-size:", euiTheme.base * (isRefreshVariant ? 3.5 : 4), "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
+    euiRangeInput: /*#__PURE__*/(0, _react.css)("inline-size:auto;min-inline-size:", euiTheme.base * 3.5, "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
   };
 };

package/lib/components/header/header.styles.js

@@ -8,7 +8,6 @@ var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
 var _services = require("../../services");
-var _form = require("../form/form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,22 +53,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 euiTheme = euiThemeContext.euiTheme;
   var backgroundColor = euiTheme.components.headerDarkBackground;
-
-  // Specific color overrides for EuiSelectableTemplateSitewide
-  var selectableSitewide = {
-    color: euiTheme.colors.ghost,
-    borderColor: euiTheme.components.headerDarkSearchBorderColor,
-    placeholderColor: (0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor)
-  };
-  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  ");
-  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  ");
+  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  ");
 };

package/lib/components/header/header_section/header_section_item_button.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiHeaderSectionItemButtonStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _header = require("../header.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)."; } /*
@@ -35,14 +34,13 @@ var euiHeaderSectionItemButtonStyles = exports.euiHeaderSectionItemButtonStyles
   var _euiHeaderVariables = (0, _header.euiHeaderVariables)(euiThemeContext),
     childHeight = _euiHeaderVariables.childHeight;
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var dotSize = euiTheme.size.base;
-  var dotOffset = isRefreshVariant ? (0, _global_styling.mathWithUnits)(dotSize, function (x) {
+  var dotOffset = (0, _global_styling.mathWithUnits)(dotSize, function (x) {
     return x * -0.5;
-  }) : 0;
-  var badgeOffset = isRefreshVariant ? (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
+  });
+  var badgeOffset = (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
     return x * -0.5;
-  }) : '9%';
+  });
   return {
     euiHeaderSectionItemButton: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', childHeight), " ", (0, _global_styling.logicalCSS)('min-width', childHeight), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " text-align:center;font-size:0;", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{", (0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(childHeight, function (x) {
       return x * 0.75;

package/lib/components/icon/assets/paper_clip.js

@@ -34,7 +34,7 @@ var EuiIconPaperClip = function EuiIconPaperClip(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M9.84 2.019 3.046 8.57c-.987.952-1.133 2.517-.199 3.516.951 1.021 2.58 1.106 3.64.19.034-.03.068-.061.1-.092l5.655-5.452a.484.484 0 0 0 0-.703.53.53 0 0 0-.729 0L5.92 11.421c-.572.551-1.505.657-2.131.163a1.455 1.455 0 0 1-.118-2.211l6.899-6.651a2.646 2.646 0 0 1 3.644 0 2.422 2.422 0 0 1 0 3.513L7.3 12.901c-1.333 1.285-3.497 1.493-4.95.336-1.54-1.22-1.764-3.411-.5-4.897a3.33 3.33 0 0 1 .238-.252l5.78-5.572a.484.484 0 0 0 0-.703.53.53 0 0 0-.73 0l-5.78 5.572a4.36 4.36 0 0 0 0 6.324c2.188 2.109 5.202 1.31 6.66-.095l6.925-6.676a3.39 3.39 0 0 0 0-4.92C13.534.66 11.25.66 9.841 2.019z"
+    d: "M7 11c0 .423.105.648.229.771.123.124.348.229.771.229.423 0 .648-.105.771-.229.124-.123.229-.348.229-.771V5h1v6c0 .577-.145 1.102-.521 1.479C9.102 12.854 8.577 13 8 13c-.577 0-1.102-.145-1.479-.521C6.145 12.101 6 11.577 6 11V4c0-.719.215-1.468.716-2.046C7.226 1.364 7.996 1 9 1c1.005 0 1.773.365 2.284.954.5.578.716 1.327.716 2.046v7c0 1.103-.345 2.11-1.043 2.845C10.255 14.583 9.242 15 8 15c-1.242 0-2.255-.417-2.957-1.155C4.345 13.11 4 12.103 4 11V4h1v7c0 .897.279 1.64.768 2.155C6.253 13.666 6.99 14 8 14c1.01 0 1.747-.334 2.232-.845.49-.515.768-1.258.768-2.155V4c0-.531-.16-1.032-.472-1.392C10.227 2.26 9.745 2 9 2s-1.227.26-1.528.608C7.16 2.968 7 3.47 7 4v7Z"
   }));
 };
 var icon = exports.icon = EuiIconPaperClip;

package/lib/components/icon/assets/streams_wired.js

@@ -29,17 +29,18 @@ var EuiIconStreamsWired = function EuiIconStreamsWired(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
+    fill: "none",
     viewBox: "0 0 16 16",
     "aria-labelledby": titleId
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
     fillRule: "evenodd",
-    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5v1c0 .564-.19 1.082-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.501 2.501 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8h-.504c.315.418.504.936.504 1.5v1A1.5 1.5 0 0 0 9 12h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5v-1A1.5 1.5 0 0 0 5 8H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 5.5v-1A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 11a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5V6a2.49 2.49 0 0 1-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.496 2.496 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8.5h-.504c.315.418.504.936.504 1.5v1.5A1.5 1.5 0 0 0 9 13h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5V10A1.5 1.5 0 0 0 5 8.5H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 6V4.5A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 12a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }), (0, _react2.jsx)("path", {
     fillRule: "evenodd",
-    d: "M13.5 6a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425A1.5 1.5 0 0 1 13.5 6Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 6.5a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425a1.5 1.5 0 0 1 1.413-1Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }));
 };

package/lib/components/icon/svgs/paper_clip.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.84 2.019L3.046 8.57c-.987.952-1.133 2.517-.199 3.516.951 1.021 2.58 1.106 3.64.19.034-.03.068-.061.1-.092l5.655-5.452a.484.484 0 000-.703.53.53 0 00-.729 0L5.92 11.421c-.572.551-1.505.657-2.131.163a1.455 1.455 0 01-.118-2.211l6.899-6.651a2.646 2.646 0 013.644 0 2.422 2.422 0 010 3.513L7.3 12.901c-1.333 1.285-3.497 1.493-4.95.336-1.54-1.22-1.764-3.411-.5-4.897.075-.088.154-.172.238-.252l5.78-5.572a.484.484 0 000-.703.53.53 0 00-.73 0l-5.78 5.572a4.36 4.36 0 000 6.324c2.188 2.109 5.202 1.31 6.66-.095l6.925-6.676a3.39 3.39 0 000-4.92C13.534.66 11.25.66 9.841 2.019z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M7 11C7 11.4229 7.10536 11.6483 7.22852 11.7715C7.35168 11.8946 7.57707 12 8 12C8.42293 12 8.64832 11.8946 8.77148 11.7715C8.89464 11.6483 9 11.4229 9 11V5H10V11C10 11.5771 9.85536 12.1017 9.47852 12.4785C9.10168 12.8554 8.57707 13 8 13C7.42293 13 6.89832 12.8554 6.52148 12.4785C6.14464 12.1017 6 11.5771 6 11V4C6 3.28108 6.21527 2.53178 6.71582 1.9541C7.22667 1.3647 7.99544 1 9 1C10.0046 1 10.7733 1.3647 11.2842 1.9541C11.7847 2.53178 12 3.28108 12 4V11C12 12.103 11.6546 13.1101 10.957 13.8447C10.2555 14.5834 9.24184 15 8 15C6.75816 15 5.74451 14.5834 5.04297 13.8447C4.34537 13.1101 4 12.103 4 11V4H5V11C5 11.8967 5.2785 12.64 5.76758 13.1553C6.25296 13.6664 6.98973 14 8 14C9.01027 14 9.74704 13.6664 10.2324 13.1553C10.7215 12.64 11 11.8967 11 11V4C11 3.46903 10.8402 2.96818 10.5283 2.6084C10.2266 2.26039 9.74507 2 9 2C8.25493 2 7.7734 2.26039 7.47168 2.6084C7.15985 2.96818 7 3.46903 7 4V11Z" />
+</svg>

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiKeyPadMenuItemStyles = exports.euiKeyPadMenuItemChildStyles = void 0;
 var _react = require("@emotion/react");
-var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _accessibility = require("../accessibility");
@@ -19,29 +18,26 @@ var _key_pad_menu = require("./key_pad_menu.styles");
  */
 
 var euiKeyPadMenuItemStyles = exports.euiKeyPadMenuItemStyles = function euiKeyPadMenuItemStyles(euiThemeContext) {
-  var _euiTheme$flags;
   var euiTheme = euiThemeContext.euiTheme;
   var _euiKeyPadMenuVariabl = (0, _key_pad_menu.euiKeyPadMenuVariables)(euiThemeContext),
     euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize;
-  var hasVisColorAdjustment = (_euiTheme$flags = euiTheme.flags) === null || _euiTheme$flags === void 0 ? void 0 : _euiTheme$flags.hasVisColorAdjustment;
-  var focusTransformStyles = "\n    ".concat((0, _euiThemeCommon.euiShadow)(euiThemeContext, 's'), ";\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      .euiKeyPadMenuItem__icon {\n        transform: translateY(0);\n      }\n    }\n  ");
   return {
     euiKeyPadMenuItem: /*#__PURE__*/(0, _react.css)("display:block;padding:", euiTheme.size.xs, ";", (0, _global_styling.logicalSizeCSS)(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.textParagraph, ";", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
-    enabled: /*#__PURE__*/(0, _react.css)("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    enabled: /*#__PURE__*/(0, _react.css)("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;background-color:", euiTheme.colors.backgroundBaseInteractiveHover, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       // Use `outline` instead of border to avoid affecting absolutely positioned children
       preferred: "\n            outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";\n          ")
-    }), " ", hasVisColorAdjustment ? focusTransformStyles : "background-color: ".concat(euiTheme.colors.backgroundBaseInteractiveHover), ";}&:focus{box-shadow:none;background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
-    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : '', ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", !hasVisColorAdjustment ? euiTheme.colors.backgroundBaseInteractiveSelect : '', ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    }), ";}&:focus{box-shadow:none;background-color:", euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       // Skip checkable items (which render a <label> instead of <button>/<a>),
       // as they already have sufficient indication of state (checkbox or radio)
       preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.primary, ";\n              outline-offset: 0;\n            }\n          ")
     }), ";};label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-        none: "\n            .euiKeyPadMenuItem__icon {\n              filter: ".concat(hasVisColorAdjustment ? 'grayscale(100%)' : '', ";\n\n              svg * {\n                fill: ").concat(euiTheme.colors.textDisabled, ";\n              }\n            }\n          "),
+        none: "\n            .euiKeyPadMenuItem__icon {\n              svg * {\n                fill: ".concat(euiTheme.colors.textDisabled, ";\n              }\n            }\n          "),
         forced: 'opacity: 0.5;'
       }), ";;label:disabled;"),
-      selected: /*#__PURE__*/(0, _react.css)("background-color:", hasVisColorAdjustment ? euiTheme.components.keyPadMenuItemBackgroundDisabledSelect : euiTheme.colors.backgroundBaseDisabled, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      selected: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.backgroundBaseDisabled, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
         preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.textDisabled, ";\n            }\n          ")
       }), ";;label:selected;")
     }