@elastic/eui 95.7.0 → 95.8.0-backport.0

package/optimize/es/components/date_picker/date_picker.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
@@ -99,14 +100,13 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     timeFormat = _ref$timeFormat === void 0 ? euiDatePickerDefaultTimeFormat : _ref$timeFormat,
     utcOffset = _ref.utcOffset,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // Check for whether the passed `selected` moment date is valid
+  var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
   var styles = useEuiMemoizedStyles(euiDatePickerStyles);
-  var cssStyles = [styles.euiDatePicker, inline && styles.inline, inline && shadow && styles.shadow];
+  var cssStyles = [styles.euiDatePicker].concat(_toConsumableArray(inline ? [styles.inline.inline, isInvalid && !(disabled || readOnly) && styles.inline.invalid, shadow ? styles.inline.shadow : styles.inline.noShadow, disabled && styles.inline.disabled, readOnly && styles.inline.readOnly] : []));
   var calendarStyles = useEuiMemoizedStyles(euiReactDatePickerStyles);
   var classes = classNames('euiDatePicker', className);
 
-  // Check for whether the passed `selected` moment date is valid
-  var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
-
   // Passed to the default EuiFieldText input, not passed to custom inputs
   var defaultInputProps = !inline && !customInput ? {
     compressed: compressed,
@@ -197,11 +197,8 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     isInvalid: isInvalid,
     isDisabled: disabled,
     readOnly: readOnly,
-    className: classNames({
-      // Take advantage of `euiFormControlLayoutDelimited`'s replacement input styling
-      euiFormControlLayoutDelimited: inline,
-      'euiFormControlLayoutDelimited--isInvalid': inline && isInvalid && !disabled && !readOnly
-    }),
+    isDelimited: inline // Styling shortcut for inline calendars
+    ,
     iconsPosition: inline ? 'static' : undefined
   }, control));
 };

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

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
+import { euiFormControlDisabledStyles, euiFormControlReadOnlyStyles, euiFormControlDefaultShadow, euiFormControlInvalidStyles } from '../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1gj9wh1-euiDatePicker",
   styles: "display:block;label:euiDatePicker;"
@@ -22,7 +23,18 @@ export var euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiDatePicker: _ref,
-    inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " background-color:transparent;box-shadow:none;padding:0;}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:transparent;flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", logicalCSS('padding-bottom', euiTheme.size.s), ";};label:inline;"),
-    shadow: /*#__PURE__*/css(".euiFormControlLayout{", euiShadowMedium(euiThemeContext), ";}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";};label:shadow;")
+    inline: {
+      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " box-shadow:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", logicalCSS('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      // Skip css`` to avoid generating an Emotion className
+      noShadow: "\n        .euiFormControlLayout {\n          background-color: transparent;\n        }\n      ",
+      shadow: /*#__PURE__*/css(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", euiShadowMedium(euiThemeContext), ";};label:shadow;"),
+      // Needs to come before shadow CSS so that it doesn't override their background-colors
+      invalid: /*#__PURE__*/css(".euiFormControlLayout{", euiFormControlDefaultShadow(euiThemeContext, {
+        withBorder: false
+      }), " ", euiFormControlInvalidStyles(euiThemeContext), ";};label:invalid;"),
+      // Should come after shadow CSS to override their background-colors
+      disabled: /*#__PURE__*/css(".euiFormControlLayout{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
+      readOnly: /*#__PURE__*/css(".euiFormControlLayout{", euiFormControlReadOnlyStyles(euiThemeContext), ";};label:readOnly;")
+    }
   };
 };

package/optimize/es/components/date_picker/date_picker_range.js

@@ -112,6 +112,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     isInvalid: isInvalid,
     isLoading: isLoading,
     append: inline ? undefined : append,
-    prepend: inline ? undefined : prepend
+    prepend: inline ? undefined : prepend,
+    css: inline && !disabled && (shadow ? inlineStyles.formLayout.shadow : inlineStyles.formLayout.noShadow)
   }));
 };

package/optimize/es/components/date_picker/date_picker_range.styles.js

@@ -1,3 +1,4 @@
+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
@@ -12,6 +13,14 @@ import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
 export var euiDatePickerRangeStyles = {
   euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";};label:euiDatePickerRange;")
 };
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "bicgs9-noShadow",
+  styles: "background-color:transparent;label:noShadow;"
+} : {
+  name: "bicgs9-noShadow",
+  styles: "background-color:transparent;label:noShadow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
@@ -23,9 +32,15 @@ export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineSty
     return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", logicalCSS('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
-    shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
+    shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext), ";};label:shadow;"),
+    // Applied directly to EuiFormControlLayout so we can check if `disabled`
+    // and allow the disabled background-color to take precedence
+    formLayout: {
+      noShadow: _ref,
+      shadow: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:shadow;")
+    }
   };
 };

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,6 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["isDisabled"];
+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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -274,7 +278,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         compressed: compressed,
         isInvalid: isInvalid,
         isLoading: isLoading && !showUpdateButton,
-        disabled: !!isDisabled,
+        isDisabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
         append: autoRefreshAppend,
         fullWidth: true,
@@ -305,9 +309,16 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         })));
       }
       var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
+
+      // EuiFormControlLayout wants `isDisabled`, EuiDatePickerRange wants `disabled` :T
+      var _ = formControlLayoutProps.isDisabled,
+        _rangeProps = _objectWithoutProperties(formControlLayoutProps, _excluded);
+      var rangeProps = _objectSpread(_objectSpread({}, _rangeProps), {}, {
+        disabled: formControlLayoutProps.isDisabled
+      });
       return ___EmotionJSX(EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
-        return ___EmotionJSX(EuiDatePickerRange, _extends({}, formControlLayoutProps, {
+        return ___EmotionJSX(EuiDatePickerRange, _extends({}, rangeProps, {
           css: rangeCssStyles,
           isCustom: true,
           iconType: false,

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -42,7 +42,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
   var needsUpdatingBackgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.success, 0.7) : tint(euiTheme.colors.success, 0.9);
   var needsUpdatingTextColor = makeHighContrastColor(euiTheme.colors.success)(needsUpdatingBackgroundColor);
   return {
-    euiSuperDatePicker: /*#__PURE__*/css("display:flex;gap:", gap, ";", logicalCSS('max-width', '100%'), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), ";}.euiFormControlLayout__childrenWrapper:last-child{", logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ";};label:euiSuperDatePicker;"),
+    euiSuperDatePicker: /*#__PURE__*/css("display:flex;gap:", gap, ";", logicalCSS('max-width', '100%'), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
       restricted: /*#__PURE__*/css(logicalCSS('width', restrictedWidth), ";;label:restricted;"),
       full: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:full;"),
@@ -62,9 +62,9 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
       full: "\n        label: isAutoRefreshOnly;\n        display: block;\n      "
     },
     // isQuickSelectOnly forces `width` to be `auto`
-    isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ";;label:isQuickSelectOnly;"),
+    isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto !important'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
@@ -72,7 +72,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
       default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
       disabled: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
       invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.dangerText, ";background-color:", forms.backgroundColor, ";", euiFormControlInvalidStyles(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/css(".euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
+      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
     }
   };
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "css", "id", "checked", "label", "onChange", "type", "disabled", "indeterminate", "inputRef", "labelProps"];
+var _excluded = ["className", "id", "checked", "label", "onChange", "type", "disabled", "readOnly", "indeterminate", "inputRef", "labelProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,14 +9,14 @@ var _excluded = ["className", "css", "id", "checked", "label", "onChange", "type
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import { useCombinedRefs } from '../../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
+import { EuiIcon } from '../../icon';
+import { euiCheckboxStyles } from './checkbox.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCheckbox = function EuiCheckbox(_ref) {
   var className = _ref.className,
-    customCss = _ref.css,
     id = _ref.id,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
@@ -25,26 +25,19 @@ export var EuiCheckbox = function EuiCheckbox(_ref) {
     type = _ref.type,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
     inputRef = _ref.inputRef,
     labelProps = _ref.labelProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiCheckbox', {
-    'euiCheckbox--noLabel': !label
-  }, className);
-  var styles = {
-    euiCheckbox: /*#__PURE__*/css(";label:euiCheckbox;")
-  }; // TODO: Emotion conversion
-  var cssStyles = [styles.euiCheckbox, customCss];
-  var optionalLabel = useMemo(function () {
-    if (!label) return;
-    var labelClasses = classNames('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
-    return ___EmotionJSX("label", _extends({}, labelProps, {
-      className: labelClasses,
-      htmlFor: id
-    }), label);
-  }, [label, labelProps, id]);
+  var classes = classNames('euiCheckbox', className);
+  var styles = useEuiMemoizedStyles(euiCheckboxStyles);
+  var inputStyles = [styles.input.euiCheckbox__square, disabled ? checked || indeterminate ? styles.input.disabled.selected : styles.input.disabled.unselected : checked || indeterminate ? styles.input.enabled.selected : styles.input.enabled.unselected, readOnly && styles.input.readOnly];
+  var labelClasses = classNames('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
+  var labelStyles = [styles.label.euiCheckbox__label, disabled ? styles.label.disabled : styles.label.enabled, readOnly && styles.label.readOnly, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
+  var iconStyles = [styles.input.icon.euiCheckbox__icon, indeterminate ? styles.input.icon.indeterminate : styles.input.icon.check];
 
   // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
   var setIndeterminateState = useCallback(function (input) {
@@ -52,17 +45,27 @@ export var EuiCheckbox = function EuiCheckbox(_ref) {
   }, [indeterminate]);
   var refs = useCombinedRefs([inputRef, setIndeterminateState]);
   return ___EmotionJSX("div", {
-    css: cssStyles,
+    css: styles.euiCheckbox,
     className: classes
-  }, ___EmotionJSX("input", _extends({
+  }, ___EmotionJSX("div", {
+    css: inputStyles,
+    className: "euiCheckbox__square"
+  }, ___EmotionJSX(EuiIcon, {
+    css: iconStyles,
+    type: indeterminate ? 'stopFilled' : checked ? 'check' : 'empty'
+  }), ___EmotionJSX("input", _extends({
+    css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",
     type: "checkbox",
     id: id,
     checked: checked,
     onChange: onChange,
     disabled: disabled,
+    readOnly: readOnly,
     ref: refs
-  }, rest)), ___EmotionJSX("div", {
-    className: "euiCheckbox__square"
-  }), optionalLabel);
+  }, rest))), label && ___EmotionJSX("label", _extends({}, labelProps, {
+    css: labelStyles,
+    className: labelClasses,
+    htmlFor: id
+  }), label));
 };

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

@@ -0,0 +1,62 @@
+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 { euiFormCustomControlStyles, euiFormCustomControlVariables } from '../form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1m8ob9b-readOnly",
+  styles: "cursor:default;label:readOnly;"
+} : {
+  name: "1m8ob9b-readOnly",
+  styles: "cursor:default;label:readOnly;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;"
+} : {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiCheckboxStyles = function euiCheckboxStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlStyles = euiFormCustomControlStyles(euiThemeContext);
+  var _euiFormCustomControl = euiFormCustomControlVariables(euiThemeContext),
+    unselectedBorder = _euiFormCustomControl.colors.unselectedBorder;
+  return {
+    euiCheckbox: /*#__PURE__*/css(controlStyles.wrapper, ";label:euiCheckbox;"),
+    input: {
+      euiCheckbox__square: /*#__PURE__*/css(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      enabled: {
+        selected: /*#__PURE__*/css(controlStyles.input.enabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/css(controlStyles.input.enabled.unselected, ";label:unselected;")
+      },
+      disabled: {
+        selected: /*#__PURE__*/css(controlStyles.input.disabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/css(controlStyles.input.disabled.unselected, ";label:unselected;")
+      },
+      // Readonly checkboxes are used by EuiMarkdownEditor
+      // Maintain the initial color to enforce that clicks are not doing anything
+      readOnly: /*#__PURE__*/css("&:has(input:focus-visible){outline:", euiTheme.focus.width, " solid ", unselectedBorder, ";}&:has(input:focus){border-color:", unselectedBorder, ";};label:readOnly;"),
+      icon: {
+        euiCheckbox__icon: /*#__PURE__*/css(";label:euiCheckbox__icon;"),
+        check: /*#__PURE__*/css(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
+        indeterminate: _ref2
+      },
+      euiCheckbox__input: /*#__PURE__*/css(controlStyles.input.hiddenInput, " &[readonly]{cursor:default;};label:euiCheckbox__input;")
+    },
+    label: {
+      euiCheckbox__label: /*#__PURE__*/css(controlStyles.label.label, ";label:euiCheckbox__label;"),
+      enabled: controlStyles.label.enabled,
+      disabled: /*#__PURE__*/css(controlStyles.label.disabled, ";label:disabled;"),
+      readOnly: _ref
+    }
+  };
+};

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

@@ -11,10 +11,12 @@ var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "t
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiTitle } from '../../title';
 import { EuiText } from '../../text';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { useFormContext } from '../eui_form_context';
+import { euiDescribedFormGroupStyles } from './described_form_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
   var _useFormContext = useFormContext(),
@@ -34,15 +36,18 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
     descriptionFlexItemProps = props.descriptionFlexItemProps,
     fieldFlexItemProps = props.fieldFlexItemProps,
     rest = _objectWithoutProperties(props, _excluded);
-  var classes = classNames('euiDescribedFormGroup', {
-    'euiDescribedFormGroup--fullWidth': fullWidth
-  }, className);
+  var styles = useEuiMemoizedStyles(euiDescribedFormGroupStyles);
+  var cssStyles = [styles.euiDescribedFormGroup, fullWidth ? styles.fullWidth : styles.formWidth];
+  var descriptionColumnStyles = [styles.euiDescribedFormGroup__descriptionColumn, descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.css];
+  var fieldColumnStyles = [styles.euiDescribedFormGroup__fields, fieldFlexItemProps === null || fieldFlexItemProps === void 0 ? void 0 : fieldFlexItemProps.css];
+  var classes = classNames('euiDescribedFormGroup', className);
   var fieldClasses = classNames('euiDescribedFormGroup__fields', fieldFlexItemProps && fieldFlexItemProps.className);
   var renderedDescription;
   if (description) {
     renderedDescription = ___EmotionJSX(EuiText, {
       size: "s",
       color: "subdued",
+      css: styles.euiDescribedFormGroup__description,
       className: "euiDescribedFormGroup__description"
     },
     // If the description is just a string, wrap it in a paragraph element
@@ -63,15 +68,17 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
       console.warn('Please provide an allowed ratio to EuiDescribedFromRow');
       break;
   }
-  return ___EmotionJSX("div", _extends({
-    role: "group",
-    className: classes
-  }, rest), ___EmotionJSX(EuiFlexGroup, {
+  return ___EmotionJSX(EuiFlexGroup, _extends({
+    role: "group"
+  }, rest, {
+    css: cssStyles,
+    className: classes,
     alignItems: "baseline",
     gutterSize: gutterSize
-  }, ___EmotionJSX(EuiFlexItem, _extends({
+  }), ___EmotionJSX(EuiFlexItem, _extends({
     grow: 1
   }, descriptionFlexItemProps, {
+    css: descriptionColumnStyles,
     className: classNames('euiDescribedFormGroup__descriptionColumn', descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.className)
   }), ___EmotionJSX(EuiTitle, {
     size: titleSize,
@@ -79,6 +86,7 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
   }, title), renderedDescription), ___EmotionJSX(EuiFlexItem, _extends({
     grow: fieldGrowth
   }, fieldFlexItemProps, {
+    css: fieldColumnStyles,
     className: fieldClasses
-  }), children)));
+  }), children));
 };

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

@@ -0,0 +1,26 @@
+/*
+ * 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 { euiFormMaxWidth } from '../form.styles';
+export var euiDescribedFormGroupStyles = function euiDescribedFormGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formMaxWidth = euiFormMaxWidth(euiThemeContext);
+  return {
+    euiDescribedFormGroup: /*#__PURE__*/css("&+*{", logicalCSS('margin-top', euiTheme.size.l), ";};label:euiDescribedFormGroup;"),
+    // Skip css`` to avoid generating an Emotion className
+    formWidth: "\n      ".concat(logicalCSS('max-width', mathWithUnits(formMaxWidth, function (x) {
+      return x * 2;
+    })), "\n    "),
+    fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:fullWidth;"),
+    euiDescribedFormGroup__descriptionColumn: /*#__PURE__*/css(logicalCSS('min-width', 'min(20rem, 50%)'), ";;label:euiDescribedFormGroup__descriptionColumn;"),
+    euiDescribedFormGroup__description: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.s), ";;label:euiDescribedFormGroup__description;"),
+    euiDescribedFormGroup__fields: /*#__PURE__*/css(logicalCSS('min-width', 0), "&>.euiFormRow:first-child:not(.euiFormRow--hasLabel){&::before{content:'';}}&>.euiFormRow--hasEmptyLabelSpace:first-child{", logicalCSS('margin-top', 0), ";};label:euiDescribedFormGroup__fields;")
+  };
+};

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

@@ -104,6 +104,7 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid || isNativelyInvalid,
+    isDisabled: rest.disabled,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

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

@@ -9,9 +9,10 @@
 import { css } from '@emotion/react';
 import { euiFormControlStyles } from '../form.styles';
 export var euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
+  var colorMode = euiThemeContext.colorMode;
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
-    euiFieldNumber: /*#__PURE__*/css(formStyles.shared, "&:is(:invalid, [aria-invalid=\"true\"]){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
+    euiFieldNumber: /*#__PURE__*/css(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

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

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "id", "name", "placeholder", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps"];
+var _excluded = ["className", "id", "name", "placeholder", "value", "disabled", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,6 +29,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     name = props.name,
     placeholder = props.placeholder,
     value = props.value,
+    disabled = props.disabled,
     isInvalid = props.isInvalid,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
@@ -78,14 +79,14 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
         iconType: isVisible ? 'eyeClosed' : 'eye',
         "aria-label": isVisible ? maskPasswordLabel : showPasswordLabel,
         title: isVisible ? maskPasswordLabel : showPasswordLabel,
-        disabled: rest.disabled
+        disabled: disabled
       }, dualToggleProps, {
         onClick: function onClick(e) {
           return handleToggle(e, isVisible);
         }
       }));
     }
-  }, [type, inputType, maskPasswordLabel, showPasswordLabel, dualToggleProps, handleToggle, rest.disabled]);
+  }, [type, inputType, maskPasswordLabel, showPasswordLabel, dualToggleProps, handleToggle, disabled]);
   var finalAppend = useMemo(function () {
     if (!visibilityToggle) return append;
     if (!append) return visibilityToggle;
@@ -105,6 +106,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
     append: finalAppend
@@ -118,6 +120,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     className: classes,
     css: cssStyles,
     value: value,
+    disabled: disabled,
     ref: setInputRef
   }, rest))));
 };

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["stylesMemoizer", "className", "id", "name", "placeholder", "isInvalid", "fullWidth", "isLoading", "inputRef", "incremental", "compressed", "onSearch", "isClearable", "append", "prepend"];
+var _excluded = ["stylesMemoizer", "className", "id", "name", "placeholder", "isInvalid", "disabled", "fullWidth", "isLoading", "inputRef", "incremental", "compressed", "onSearch", "isClearable", "append", "prepend"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -19,8 +19,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { Browser } from '../../../services/browser';
 import { keys, withEuiStylesMemoizer } from '../../../services';
+import { Browser } from '../../../services/browser';
+import { EuiI18n } from '../../i18n';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { FormContext } from '../eui_form_context';
@@ -152,6 +153,7 @@ export var EuiFieldSearchClass = /*#__PURE__*/function (_Component) {
         name = _this$props2.name,
         placeholder = _this$props2.placeholder,
         isInvalid = _this$props2.isInvalid,
+        disabled = _this$props2.disabled,
         _this$props2$fullWidt = _this$props2.fullWidth,
         fullWidth = _this$props2$fullWidt === void 0 ? defaultFullWidth : _this$props2$fullWidt,
         isLoading = _this$props2.isLoading,
@@ -167,7 +169,7 @@ export var EuiFieldSearchClass = /*#__PURE__*/function (_Component) {
       if (typeof this.props.value !== 'string') value = this.state.value;
 
       // Set actual value of isClearable if value exists as well
-      var isClearable = Boolean(_isClearable && value && !rest.readOnly && !rest.disabled);
+      var isClearable = Boolean(_isClearable && value && !rest.readOnly && !disabled);
       var classes = classNames('euiFieldSearch', {
         'euiFieldSearch-isLoading': isLoading,
         'euiFieldSearch-isClearable': isClearable,
@@ -175,32 +177,40 @@ export var EuiFieldSearchClass = /*#__PURE__*/function (_Component) {
       }, className);
       var styles = stylesMemoizer(euiFieldSearchStyles);
       var cssStyles = [styles.euiFieldSearch, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth, (prepend || append) && styles.inGroup];
-      return ___EmotionJSX(EuiFormControlLayout, {
-        icon: "search",
-        fullWidth: fullWidth,
-        isLoading: isLoading,
-        isInvalid: isInvalid,
-        clear: isClearable ? {
-          onClick: this.onClear,
-          'data-test-subj': 'clearSearchButton'
-        } : undefined,
-        compressed: compressed,
-        append: append,
-        prepend: prepend
-      }, ___EmotionJSX(EuiValidatableControl, {
-        isInvalid: isInvalid
-      }, ___EmotionJSX("input", _extends({
-        type: "search",
-        id: id,
-        name: name,
-        placeholder: placeholder,
-        className: classes,
-        css: cssStyles,
-        onKeyUp: function onKeyUp(e) {
-          return _this3.onKeyUp(e, incremental, onSearch);
-        },
-        ref: this.setRef
-      }, rest))));
+      return ___EmotionJSX(EuiI18n, {
+        token: "euiFieldSearch.clearSearchButtonLabel",
+        default: "Clear search input"
+      }, function (clearSearchButtonLabel) {
+        return ___EmotionJSX(EuiFormControlLayout, {
+          icon: "search",
+          fullWidth: fullWidth,
+          isLoading: isLoading,
+          isInvalid: isInvalid,
+          isDisabled: disabled,
+          clear: isClearable ? {
+            onClick: _this3.onClear,
+            'aria-label': clearSearchButtonLabel,
+            'data-test-subj': 'clearSearchButton'
+          } : undefined,
+          compressed: compressed,
+          append: append,
+          prepend: prepend
+        }, ___EmotionJSX(EuiValidatableControl, {
+          isInvalid: isInvalid
+        }, ___EmotionJSX("input", _extends({
+          type: "search",
+          id: id,
+          name: name,
+          placeholder: placeholder,
+          className: classes,
+          css: cssStyles,
+          onKeyUp: function onKeyUp(e) {
+            return _this3.onKeyUp(e, incremental, onSearch);
+          },
+          disabled: disabled,
+          ref: _this3.setRef
+        }, rest))));
+      });
     }
   }]);
 }(Component);