@elastic/eui 95.7.0 → 95.8.0-backport.0

package/optimize/es/components/form/form_control_layout/form_control_layout_delimited.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["startControl", "endControl", "delimiter", "className"];
+var _excluded = ["startControl", "endControl", "delimiter", "className", "fullWidth"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,19 +12,27 @@ var _excluded = ["startControl", "endControl", "delimiter", "className"];
  * Side Public License, v 1.
  */
 
-import React, { cloneElement } from 'react';
+import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
+import { FormContext, useFormContext } from '../eui_form_context';
 import { EuiFormControlLayout } from './form_control_layout';
+import { euiFormControlLayoutDelimitedStyles, euiFormControlLayoutDelimited__delimiter, euiFormControlLayoutDelimited__input } from './form_control_layout_delimited.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimited(_ref) {
+  var _rest$wrapperProps;
   var startControl = _ref.startControl,
     endControl = _ref.endControl,
     delimiter = _ref.delimiter,
     className = _ref.className,
+    _fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useFormContext = useFormContext(),
+    defaultFullWidth = _useFormContext.defaultFullWidth;
+  var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
   var isInvalid = rest.isInvalid,
     isDisabled = rest.isDisabled,
     readOnly = rest.readOnly;
@@ -29,24 +40,40 @@ export var EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimite
   var classes = classNames('euiFormControlLayoutDelimited', className, {
     'euiFormControlLayoutDelimited--isInvalid': showInvalidState
   });
+  var styles = useEuiMemoizedStyles(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];
   return ___EmotionJSX(EuiFormControlLayout, _extends({
+    isDelimited: true,
+    css: cssStyles,
     className: classes,
-    iconsPosition: "static"
-  }, rest), addClassesToControl(startControl), ___EmotionJSX(EuiFormControlDelimiter, {
+    iconsPosition: "static",
+    fullWidth: fullWidth
+  }, rest, {
+    wrapperProps: _objectSpread(_objectSpread({}, rest.wrapperProps), {}, {
+      css: wrapperStyles
+    })
+  }), ___EmotionJSX(FormContext.Provider, {
+    value: {
+      defaultFullWidth: fullWidth
+    }
+  }, addClassesToControl(startControl), ___EmotionJSX(EuiFormControlDelimiter, {
     delimiter: delimiter,
     isInvalid: showInvalidState
-  }), addClassesToControl(endControl));
+  }), addClassesToControl(endControl)));
 };
 var addClassesToControl = function addClassesToControl(control) {
-  return /*#__PURE__*/cloneElement(control, {
+  return cloneElementWithCss(control, {
+    css: euiFormControlLayoutDelimited__input,
     className: classNames(control.props.className, 'euiFormControlLayoutDelimited__input')
-  });
+  }, 'before');
 };
 var EuiFormControlDelimiter = function EuiFormControlDelimiter(_ref2) {
   var delimiter = _ref2.delimiter,
     isInvalid = _ref2.isInvalid;
   var defaultAriaLabel = useEuiI18n('euiFormControlLayoutDelimited.delimiterLabel', 'to');
   return ___EmotionJSX(EuiText, {
+    css: euiFormControlLayoutDelimited__delimiter,
     className: "euiFormControlLayoutDelimited__delimiter",
     size: "s",
     color: isInvalid ? 'danger' : 'subdued'

package/optimize/es/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -0,0 +1,52 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormControlDisabledStyles, euiFormControlReadOnlyStyles, euiFormControlDefaultShadow, euiFormControlInvalidStyles } from '../form.styles';
+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__
+};
+export var euiFormControlLayoutDelimitedStyles = function euiFormControlLayoutDelimitedStyles(euiThemeContext) {
+  return {
+    // Appended onto existing `euiFormControlLayout` styles
+    delimited: /*#__PURE__*/css(
+    // Transition smoothly between disabled/readOnly background color changes
+    euiFormControlDefaultShadow(euiThemeContext, {
+      withBorder: false,
+      withBackground: false,
+      withBackgroundAnimation: true
+    }), ";label:delimited;"),
+    disabled: /*#__PURE__*/css(euiFormControlDisabledStyles(euiThemeContext), ";label:disabled;"),
+    readOnly: /*#__PURE__*/css(euiFormControlReadOnlyStyles(euiThemeContext), ";label:readOnly;"),
+    // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
+    childrenWrapper: {
+      delimited: _ref,
+      invalid: /*#__PURE__*/css(euiFormControlDefaultShadow(euiThemeContext, {
+        withBorder: false,
+        withBackgroundColor: false,
+        withBackgroundAnimation: false
+      }), euiFormControlInvalidStyles(euiThemeContext), ";label:invalid;")
+    }
+  };
+};
+export var 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__
+};
+export var euiFormControlLayoutDelimited__input = /*#__PURE__*/css("box-shadow:none;border-radius:0;text-align:center;", logicalCSS('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

package/optimize/es/components/form/form_control_layout/form_control_layout_icons.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -17,11 +18,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 
 import React, { Component } from 'react';
-import classNames from 'classnames';
+import { RenderWithEuiStylesMemoizer } from '../../../services';
+import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
 import { EuiFormControlLayoutCustomIcon } from './form_control_layout_custom_icon';
-import { EuiIcon } from '../../icon';
+import { euiFormControlLayoutIconsStyles } from './form_control_layout_icons.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIDES = ['left', 'right'];
 export var isIconShape = function isIconShape(icon) {
@@ -40,23 +42,30 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
         _this$props$side = _this$props.side,
         side = _this$props$side === void 0 ? 'left' : _this$props$side,
         _this$props$iconsPosi = _this$props.iconsPosition,
-        iconsPosition = _this$props$iconsPosi === void 0 ? 'absolute' : _this$props$iconsPosi;
+        iconsPosition = _this$props$iconsPosi === void 0 ? 'absolute' : _this$props$iconsPosi,
+        compressed = _this$props.compressed,
+        isDisabled = _this$props.isDisabled;
       var customIcon = this.renderCustomIcon();
       var loadingSpinner = this.renderLoadingSpinner();
       var clearButton = this.renderClearButton();
       var invalidIcon = this.renderInvalidIcon();
       var dropdownIcon = this.renderDropdownIcon();
-      var classes = classNames('euiFormControlLayoutIcons', "euiFormControlLayoutIcons--".concat(side), "euiFormControlLayoutIcons--".concat(iconsPosition));
-      return ___EmotionJSX("div", {
-        className: classes
-      }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
+      return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(euiFormControlLayoutIconsStyles);
+        var cssStyles = [styles.euiFormControlLayoutIcons, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(iconsPosition === 'absolute' ? [styles.position.absolute.absolute, compressed ? styles.position.absolute.compressed[side] : styles.position.absolute.uncompressed[side]] : [styles.position.static.static, compressed ? styles.position.static.compressed : styles.position.static.uncompressed]), [isDisabled && styles.disabled]);
+        return ___EmotionJSX("div", {
+          css: cssStyles,
+          className: "euiFormControlLayoutIcons"
+        }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
+      });
     }
   }, {
     key: "renderCustomIcon",
     value: function renderCustomIcon() {
       var _this$props2 = this.props,
         icon = _this$props2.icon,
-        compressed = _this$props2.compressed;
+        compressed = _this$props2.compressed,
+        isDisabled = _this$props2.isDisabled;
       if (!icon) {
         return null;
       }
@@ -70,6 +79,7 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
         iconRest = _objectWithoutProperties(iconProps, _excluded);
       return ___EmotionJSX(EuiFormControlLayoutCustomIcon, _extends({
         size: compressed ? 's' : 'm',
+        disabled: isDisabled,
         iconRef: iconRef
       }, iconRest));
     }
@@ -78,12 +88,14 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
     value: function renderDropdownIcon() {
       var _this$props3 = this.props,
         isDropdown = _this$props3.isDropdown,
-        compressed = _this$props3.compressed;
+        compressed = _this$props3.compressed,
+        isDisabled = _this$props3.isDisabled;
       if (!isDropdown) {
         return null;
       }
       return ___EmotionJSX(EuiFormControlLayoutCustomIcon, {
         size: compressed ? 's' : 'm',
+        disabled: isDisabled,
         type: "arrowDown"
       });
     }
@@ -105,12 +117,14 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
     value: function renderClearButton() {
       var _this$props5 = this.props,
         clear = _this$props5.clear,
-        compressed = _this$props5.compressed;
+        compressed = _this$props5.compressed,
+        isDisabled = _this$props5.isDisabled;
       if (!clear) {
         return null;
       }
       return ___EmotionJSX(EuiFormControlLayoutClearButton, _extends({
-        size: compressed ? 's' : 'm'
+        size: compressed ? 's' : 'm',
+        disabled: isDisabled
       }, clear));
     }
   }, {

package/optimize/es/components/form/form_control_layout/form_control_layout_icons.styles.js

@@ -0,0 +1,54 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "3lf9c4-euiFormControlLayoutIcons",
+  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;"
+} : {
+  name: "3lf9c4-euiFormControlLayoutIcons",
+  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlPadding = _euiFormVariables.controlPadding,
+    controlCompressedPadding = _euiFormVariables.controlCompressedPadding,
+    controlDisabledColor = _euiFormVariables.controlDisabledColor;
+  return {
+    euiFormControlLayoutIcons: _ref,
+    uncompressed: "\n      gap: ".concat(mathWithUnits(controlPadding, function (x) {
+      return x / 2;
+    }), ";\n    "),
+    compressed: /*#__PURE__*/css("gap:", mathWithUnits(controlCompressedPadding, function (x) {
+      return x / 2;
+    }), ";;label:compressed;"),
+    disabled: /*#__PURE__*/css("cursor:not-allowed;color:", controlDisabledColor, ";;label:disabled;"),
+    position: {
+      absolute: {
+        absolute: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), ";;label:absolute;"),
+        uncompressed: {
+          left: /*#__PURE__*/css("z-index:1;", logicalCSS('left', controlPadding), ";;label:left;"),
+          right: /*#__PURE__*/css(logicalCSS('right', controlPadding), ";;label:right;")
+        },
+        compressed: {
+          left: /*#__PURE__*/css("z-index:1;", logicalCSS('left', controlCompressedPadding), ";;label:left;"),
+          right: /*#__PURE__*/css(logicalCSS('right', controlCompressedPadding), ";;label:right;")
+        }
+      },
+      static: {
+        static: /*#__PURE__*/css("position:static;", logicalCSS('height', '100%'), " align-self:stretch;flex-grow:0;", logicalCSS('padding-horizontal', '100%'), ";;label:static;"),
+        uncompressed: logicalCSS('padding-horizontal', controlPadding),
+        compressed: logicalCSS('padding-horizontal', controlCompressedPadding)
+      }
+    }
+  };
+};

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

@@ -11,13 +11,17 @@ var _excluded = ["children", "className"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormErrorTextStyles } from './form_error_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormErrorText = function EuiFormErrorText(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFormErrorText', className);
+  var styles = useEuiMemoizedStyles(euiFormErrorTextStyles);
   return ___EmotionJSX("div", _extends({
+    css: styles.euiFormErrorText,
     className: classes,
     "aria-live": "polite"
   }, rest), children);

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

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { euiFontSize, logicalCSS } from '../../../global_styling';
+export var euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormErrorText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.danger, ";;label:euiFormErrorText;")
+  };
+};

package/optimize/es/components/form/form_fieldset/form_legend.js

@@ -11,7 +11,9 @@ var _excluded = ["children", "className", "display", "compressed"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
+import { euiFormLegendStyles } from './form_legend.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormLegend = function EuiFormLegend(_ref) {
   var children = _ref.children,
@@ -21,11 +23,13 @@ export var EuiFormLegend = function EuiFormLegend(_ref) {
     compressed = _ref.compressed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isLegendHidden = display === 'hidden';
+  var styles = useEuiMemoizedStyles(euiFormLegendStyles);
+  var cssStyles = [styles.euiFormLegend, !isLegendHidden && (compressed ? styles.compressed : styles.uncompressed)];
   var classes = classNames('euiFormLegend', {
-    'euiFormLegend-isHidden': isLegendHidden,
-    'euiFormLegend--compressed': compressed
+    'euiFormLegend-isHidden': isLegendHidden
   }, className);
   return ___EmotionJSX("legend", _extends({
+    css: cssStyles,
     className: classes
   }, rest), isLegendHidden ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, children)) : children);
 };

package/optimize/es/components/form/form_fieldset/form_legend.styles.js

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormLabel } from '../form_label/form_label.styles';
+export var euiFormLegendStyles = function euiFormLegendStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLegend: /*#__PURE__*/css(euiFormLabel(euiThemeContext), ";;label:euiFormLegend;"),
+    // Skip css`` to avoid generating an extra Emotion className
+    uncompressed: logicalCSS('margin-bottom', euiTheme.size.s),
+    compressed: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.xs), ";label:compressed;")
+  };
+};

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

@@ -11,13 +11,17 @@ var _excluded = ["children", "className"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormHelpTextStyles } from './form_help_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormHelpText = function EuiFormHelpText(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFormHelpText', className);
+  var styles = useEuiMemoizedStyles(euiFormHelpTextStyles);
   return ___EmotionJSX("div", _extends({
+    css: styles.euiFormHelpText,
     className: classes
   }, rest), children);
 };

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

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { euiFontSize, logicalCSS } from '../../../global_styling';
+export var euiFormHelpTextStyles = function euiFormHelpTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormHelpText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiFormHelpText;")
+  };
+};

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

@@ -11,6 +11,8 @@ var _excluded = ["type", "isFocused", "isInvalid", "isDisabled", "children", "cl
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormLabelStyles } from './form_label.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormLabel = function EuiFormLabel(_ref) {
   var _ref$type = _ref.type,
@@ -21,6 +23,8 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var styles = useEuiMemoizedStyles(euiFormLabelStyles);
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
   var classes = classNames('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,
@@ -28,10 +32,12 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
   });
   if (type === 'legend') {
     return ___EmotionJSX("legend", _extends({
+      css: cssStyles,
       className: classes
     }, rest), children);
   } else {
     return ___EmotionJSX("label", _extends({
+      css: cssStyles,
       className: classes
     }, rest), children);
   }

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

@@ -0,0 +1,37 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fontWeight"];
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { serializeStyles } from '@emotion/serialize';
+import { euiCanAnimate, euiTextBreakWord } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+export var euiFormLabel = function euiFormLabel(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  var _euiTitle = euiTitle(euiThemeContext, 'xxxs'),
+    _ = _euiTitle.fontWeight,
+    _titleStyles = _objectWithoutProperties(_euiTitle, _excluded);
+  // Since we're not returning a css`` string (to avoid generating an extra Emotion
+  // className), we need to manually serialize the style object into a string
+  var titleStyles = serializeStyles([_titleStyles]).styles;
+  return "\n    ".concat(titleStyles, "\n    font-weight: ").concat(euiTheme.font.weight.semiBold, ";\n    ").concat(euiTextBreakWord(), "\n  ");
+};
+export var euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLabel: /*#__PURE__*/css(euiFormLabel(euiThemeContext), " display:inline-block;", 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__*/css("color:", euiTheme.colors.danger, ";;label:invalid;"),
+    // Focused state should override invalid state
+    focused: /*#__PURE__*/css("color:", euiTheme.colors.primary, ";;label:focused;")
+  };
+};