@elastic/eui 95.7.0 → 95.8.0-backport.0

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

@@ -1,21 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFormControlLayoutDelimited = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _icon = require("../../icon");
 var _text = require("../../text");
+var _eui_form_context = require("../eui_form_context");
 var _form_control_layout = require("./form_control_layout");
+var _form_control_layout_delimited = require("./form_control_layout_delimited.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["startControl", "endControl", "delimiter", "className"];
+var _excluded = ["startControl", "endControl", "delimiter", "className", "fullWidth"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,14 +26,19 @@ var _excluded = ["startControl", "endControl", "delimiter", "className"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2.default)(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; }
 var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimited(_ref) {
+  var _rest$wrapperProps;
   var startControl = _ref.startControl,
     endControl = _ref.endControl,
     delimiter = _ref.delimiter,
     className = _ref.className,
+    _fullWidth = _ref.fullWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useFormContext = (0, _eui_form_context.useFormContext)(),
+    defaultFullWidth = _useFormContext.defaultFullWidth;
+  var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
   var isInvalid = rest.isInvalid,
     isDisabled = rest.isDisabled,
     readOnly = rest.readOnly;
@@ -38,24 +46,40 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
   var classes = (0, _classnames.default)('euiFormControlLayoutDelimited', className, {
     'euiFormControlLayoutDelimited--isInvalid': showInvalidState
   });
+  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];
   return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
+    isDelimited: true,
+    css: cssStyles,
     className: classes,
-    iconsPosition: "static"
-  }, rest), addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
+    iconsPosition: "static",
+    fullWidth: fullWidth
+  }, rest, {
+    wrapperProps: _objectSpread(_objectSpread({}, rest.wrapperProps), {}, {
+      css: wrapperStyles
+    })
+  }), (0, _react2.jsx)(_eui_form_context.FormContext.Provider, {
+    value: {
+      defaultFullWidth: fullWidth
+    }
+  }, addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
     delimiter: delimiter,
     isInvalid: showInvalidState
-  }), addClassesToControl(endControl));
+  }), addClassesToControl(endControl)));
 };
 var addClassesToControl = function addClassesToControl(control) {
-  return /*#__PURE__*/(0, _react.cloneElement)(control, {
+  return (0, _services.cloneElementWithCss)(control, {
+    css: _form_control_layout_delimited.euiFormControlLayoutDelimited__input,
     className: (0, _classnames.default)(control.props.className, 'euiFormControlLayoutDelimited__input')
-  });
+  }, 'before');
 };
 var EuiFormControlDelimiter = function EuiFormControlDelimiter(_ref2) {
   var delimiter = _ref2.delimiter,
     isInvalid = _ref2.isInvalid;
   var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiFormControlLayoutDelimited.delimiterLabel', 'to');
   return (0, _react2.jsx)(_text.EuiText, {
+    css: _form_control_layout_delimited.euiFormControlLayoutDelimited__delimiter,
     className: "euiFormControlLayoutDelimited__delimiter",
     size: "s",
     color: isInvalid ? 'danger' : 'subdued'

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelimitedStyles = void 0;
+var _react = require("@emotion/react");
+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) {
+  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;"),
+    disabled: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";label:disabled;"),
+    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), ";label:readOnly;"),
+    // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
+    childrenWrapper: {
+      delimited: _ref,
+      invalid: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: false,
+        withBackgroundColor: false,
+        withBackgroundAnimation: false
+      }), (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";label:invalid;")
+    }
+  };
+};
+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__input = exports.euiFormControlLayoutDelimited__input = /*#__PURE__*/(0, _react.css)("box-shadow:none;border-radius:0;text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

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

@@ -8,17 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.isIconShape = exports.ICON_SIDES = exports.EuiFormControlLayoutIcons = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _icon = require("../../icon");
 var _loading = require("../../loading");
 var _form_control_layout_clear_button = require("./form_control_layout_clear_button");
 var _form_control_layout_custom_icon = require("./form_control_layout_custom_icon");
-var _icon = require("../../icon");
+var _form_control_layout_icons = require("./form_control_layout_icons.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["ref", "side"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -48,23 +50,30 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
         _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 = (0, _classnames.default)('euiFormControlLayoutIcons', "euiFormControlLayoutIcons--".concat(side), "euiFormControlLayoutIcons--".concat(iconsPosition));
-      return (0, _react2.jsx)("div", {
-        className: classes
-      }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
+      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(_form_control_layout_icons.euiFormControlLayoutIconsStyles);
+        var cssStyles = [styles.euiFormControlLayoutIcons, compressed ? styles.compressed : styles.uncompressed].concat((0, _toConsumableArray2.default)(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 (0, _react2.jsx)("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;
       }
@@ -78,6 +87,7 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
         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));
     }
@@ -86,12 +96,14 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
     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 (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
         size: compressed ? 's' : 'm',
+        disabled: isDisabled,
         type: "arrowDown"
       });
     }
@@ -113,12 +125,14 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
     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 (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, (0, _extends2.default)({
-        size: compressed ? 's' : 'm'
+        size: compressed ? 's' : 'm',
+        disabled: isDisabled
       }, clear));
     }
   }, {

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormControlLayoutIconsStyles = void 0;
+var _react = require("@emotion/react");
+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: "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__
+};
+var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    controlPadding = _euiFormVariables.controlPadding,
+    controlCompressedPadding = _euiFormVariables.controlCompressedPadding,
+    controlDisabledColor = _euiFormVariables.controlDisabledColor;
+  return {
+    euiFormControlLayoutIcons: _ref,
+    uncompressed: "\n      gap: ".concat((0, _global_styling.mathWithUnits)(controlPadding, function (x) {
+      return x / 2;
+    }), ";\n    "),
+    compressed: /*#__PURE__*/(0, _react.css)("gap:", (0, _global_styling.mathWithUnits)(controlCompressedPadding, function (x) {
+      return x / 2;
+    }), ";;label:compressed;"),
+    disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", controlDisabledColor, ";;label:disabled;"),
+    position: {
+      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;"),
+          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;"),
+          right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', controlCompressedPadding), ";;label:right;")
+        }
+      },
+      static: {
+        static: /*#__PURE__*/(0, _react.css)("position:static;", (0, _global_styling.logicalCSS)('height', '100%'), " align-self:stretch;flex-grow:0;", (0, _global_styling.logicalCSS)('padding-horizontal', '100%'), ";;label:static;"),
+        uncompressed: (0, _global_styling.logicalCSS)('padding-horizontal', controlPadding),
+        compressed: (0, _global_styling.logicalCSS)('padding-horizontal', controlCompressedPadding)
+      }
+    }
+  };
+};

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

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_error_text = require("./form_error_text.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 /*
@@ -23,7 +25,9 @@ var EuiFormErrorText = exports.EuiFormErrorText = function EuiFormErrorText(_ref
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFormErrorText', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_error_text.euiFormErrorTextStyles);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles.euiFormErrorText,
     className: classes,
     "aria-live": "polite"
   }, rest), children);

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormErrorTextStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiFormErrorTextStyles = exports.euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  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;")
+  };
+};

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

@@ -9,7 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
+var _form_legend = require("./form_legend.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "display", "compressed"];
 /*
@@ -27,11 +29,13 @@ var EuiFormLegend = exports.EuiFormLegend = function EuiFormLegend(_ref) {
     compressed = _ref.compressed,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isLegendHidden = display === 'hidden';
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_legend.euiFormLegendStyles);
+  var cssStyles = [styles.euiFormLegend, !isLegendHidden && (compressed ? styles.compressed : styles.uncompressed)];
   var classes = (0, _classnames.default)('euiFormLegend', {
-    'euiFormLegend-isHidden': isLegendHidden,
-    'euiFormLegend--compressed': compressed
+    'euiFormLegend-isHidden': isLegendHidden
   }, className);
   return (0, _react2.jsx)("legend", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), isLegendHidden ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, children)) : children);
 };

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormLegendStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _form_label = require("../form_label/form_label.styles");
+/*
+ * 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 euiFormLegendStyles = exports.euiFormLegendStyles = function euiFormLegendStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLegend: /*#__PURE__*/(0, _react.css)((0, _form_label.euiFormLabel)(euiThemeContext), ";;label:euiFormLegend;"),
+    // Skip css`` to avoid generating an extra Emotion className
+    uncompressed: (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";label:compressed;")
+  };
+};

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

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_help_text = require("./form_help_text.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 /*
@@ -23,7 +25,9 @@ var EuiFormHelpText = exports.EuiFormHelpText = function EuiFormHelpText(_ref) {
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFormHelpText', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_help_text.euiFormHelpTextStyles);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles.euiFormHelpText,
     className: classes
   }, rest), children);
 };

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormHelpTextStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiFormHelpTextStyles = exports.euiFormHelpTextStyles = function euiFormHelpTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormHelpText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiFormHelpText;")
+  };
+};

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

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_label = require("./form_label.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["type", "isFocused", "isInvalid", "isDisabled", "children", "className"];
 /*
@@ -27,6 +29,8 @@ var EuiFormLabel = exports.EuiFormLabel = function EuiFormLabel(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_label.euiFormLabelStyles);
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
   var classes = (0, _classnames.default)('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,
@@ -34,10 +38,12 @@ var EuiFormLabel = exports.EuiFormLabel = function EuiFormLabel(_ref) {
   });
   if (type === 'legend') {
     return (0, _react2.jsx)("legend", (0, _extends2.default)({
+      css: cssStyles,
       className: classes
     }, rest), children);
   } else {
     return (0, _react2.jsx)("label", (0, _extends2.default)({
+      css: cssStyles,
       className: classes
     }, rest), children);
   }

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+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.
+ */
+var euiFormLabel = exports.euiFormLabel = function euiFormLabel(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  var _euiTitle = (0, _title.euiTitle)(euiThemeContext, 'xxxs'),
+    _ = _euiTitle.fontWeight,
+    _titleStyles = (0, _objectWithoutProperties2.default)(_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 = (0, _serialize.serializeStyles)([_titleStyles]).styles;
+  return "\n    ".concat(titleStyles, "\n    font-weight: ").concat(euiTheme.font.weight.semiBold, ";\n    ").concat((0, _global_styling.euiTextBreakWord)(), "\n  ");
+};
+var euiFormLabelStyles = exports.euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  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;"),
+    // Focused state should override invalid state
+    focused: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primary, ";;label:focused;")
+  };
+};