@elastic/eui 95.7.0 → 95.8.0-backport.0

package/lib/components/form/described_form_group/described_form_group.js

@@ -7,10 +7,12 @@ exports.EuiDescribedFormGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _title = require("../../title");
 var _text = require("../../text");
 var _flex = require("../../flex");
 var _eui_form_context = require("../eui_form_context");
+var _described_form_group = require("./described_form_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "titleSize", "title", "description", "descriptionFlexItemProps", "fieldFlexItemProps"];
 /*
@@ -42,15 +44,18 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
     descriptionFlexItemProps = props.descriptionFlexItemProps,
     fieldFlexItemProps = props.fieldFlexItemProps,
     rest = _objectWithoutProperties(props, _excluded);
-  var classes = (0, _classnames.default)('euiDescribedFormGroup', {
-    'euiDescribedFormGroup--fullWidth': fullWidth
-  }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_described_form_group.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 = (0, _classnames.default)('euiDescribedFormGroup', className);
   var fieldClasses = (0, _classnames.default)('euiDescribedFormGroup__fields', fieldFlexItemProps && fieldFlexItemProps.className);
   var renderedDescription;
   if (description) {
     renderedDescription = (0, _react2.jsx)(_text.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
@@ -71,15 +76,17 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
       console.warn('Please provide an allowed ratio to EuiDescribedFromRow');
       break;
   }
-  return (0, _react2.jsx)("div", _extends({
-    role: "group",
-    className: classes
-  }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+  return (0, _react2.jsx)(_flex.EuiFlexGroup, _extends({
+    role: "group"
+  }, rest, {
+    css: cssStyles,
+    className: classes,
     alignItems: "baseline",
     gutterSize: gutterSize
-  }, (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
+  }), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
     grow: 1
   }, descriptionFlexItemProps, {
+    css: descriptionColumnStyles,
     className: (0, _classnames.default)('euiDescribedFormGroup__descriptionColumn', descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.className)
   }), (0, _react2.jsx)(_title.EuiTitle, {
     size: titleSize,
@@ -87,8 +94,9 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
   }, title), renderedDescription), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
     grow: fieldGrowth
   }, fieldFlexItemProps, {
+    css: fieldColumnStyles,
     className: fieldClasses
-  }), children)));
+  }), children));
 };
 EuiDescribedFormGroup.propTypes = {
   className: _propTypes.default.string,

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDescribedFormGroupStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _form = require("../form.styles");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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 euiDescribedFormGroupStyles = exports.euiDescribedFormGroupStyles = function euiDescribedFormGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formMaxWidth = (0, _form.euiFormMaxWidth)(euiThemeContext);
+  return {
+    euiDescribedFormGroup: /*#__PURE__*/(0, _react.css)("&+*{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.l), ";};label:euiDescribedFormGroup;"),
+    // Skip css`` to avoid generating an Emotion className
+    formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', (0, _global_styling.mathWithUnits)(formMaxWidth, function (x) {
+      return x * 2;
+    })), "\n    "),
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:fullWidth;"),
+    euiDescribedFormGroup__descriptionColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 'min(20rem, 50%)'), ";;label:euiDescribedFormGroup__descriptionColumn;"),
+    euiDescribedFormGroup__description: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.s), ";;label:euiDescribedFormGroup__description;"),
+    euiDescribedFormGroup__fields: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), "&>.euiFormRow:first-child:not(.euiFormRow--hasLabel){&::before{content:'';}}&>.euiFormRow--hasEmptyLabelSpace:first-child{", (0, _global_styling.logicalCSS)('margin-top', 0), ";};label:euiDescribedFormGroup__fields;")
+  };
+};

package/lib/components/form/field_number/field_number.js

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

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

@@ -15,9 +15,10 @@ var _form = require("../form.styles");
  */
 
 var euiFieldNumberStyles = exports.euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
+  var colorMode = euiThemeContext.colorMode;
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldNumber: /*#__PURE__*/(0, _react.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__*/(0, _react.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__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),

package/lib/components/form/field_password/field_password.js

@@ -16,7 +16,7 @@ var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_password = require("./field_password.styles");
 var _react2 = require("@emotion/react");
-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
@@ -48,6 +48,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     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,
@@ -97,14 +98,14 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
         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 = (0, _react.useMemo)(function () {
     if (!visibilityToggle) return append;
     if (!append) return visibilityToggle;
@@ -124,6 +125,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
     append: finalAppend
@@ -137,6 +139,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     className: classes,
     css: cssStyles,
     value: value,
+    disabled: disabled,
     ref: setInputRef
   }, rest))));
 };

package/lib/components/form/field_search/field_search.js

@@ -7,14 +7,15 @@ exports.EuiFieldSearchClass = exports.EuiFieldSearch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _browser = require("../../../services/browser");
 var _services = require("../../../services");
+var _browser = require("../../../services/browser");
+var _i18n = require("../../i18n");
 var _form_control_layout = require("../form_control_layout");
 var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_search = require("./field_search.styles");
 var _react2 = require("@emotion/react");
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -167,6 +168,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
         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,
@@ -182,7 +184,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
       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 = (0, _classnames.default)('euiFieldSearch', {
         'euiFieldSearch-isLoading': isLoading,
         'euiFieldSearch-isClearable': isClearable,
@@ -190,32 +192,40 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
       }, className);
       var styles = stylesMemoizer(_field_search.euiFieldSearchStyles);
       var cssStyles = [styles.euiFieldSearch, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth, (prepend || append) && styles.inGroup];
-      return (0, _react2.jsx)(_form_control_layout.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
-      }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
-        isInvalid: isInvalid
-      }, (0, _react2.jsx)("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 (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiFieldSearch.clearSearchButtonLabel",
+        default: "Clear search input"
+      }, function (clearSearchButtonLabel) {
+        return (0, _react2.jsx)(_form_control_layout.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
+        }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
+          isInvalid: isInvalid
+        }, (0, _react2.jsx)("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))));
+      });
     }
   }]);
 }(_react.Component);

package/lib/components/form/field_text/field_text.js

@@ -69,6 +69,7 @@ var EuiFieldText = exports.EuiFieldText = function EuiFieldText(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: rest.disabled,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

package/lib/components/form/form.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _call_out = require("../call_out");
 var _i18n = require("../i18n");
+var _spacer = require("../spacer");
 var _eui_form_context = require("./eui_form_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "isInvalid", "error", "component", "invalidCallout", "fullWidth"];
@@ -37,7 +38,7 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     invalidCallout = _ref$invalidCallout === void 0 ? 'above' : _ref$invalidCallout,
     fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var formContext = _react.default.useMemo(function () {
+  var formContext = (0, _react.useMemo)(function () {
     return {
       defaultFullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : false
     };
@@ -62,7 +63,7 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
       token: "euiForm.addressFormErrors",
       default: "Please address the highlighted errors."
     }, function (addressFormErrors) {
-      return (0, _react2.jsx)(_call_out.EuiCallOut, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_call_out.EuiCallOut, {
         tabIndex: -1,
         ref: handleFocus,
         className: "euiForm__errors",
@@ -70,7 +71,9 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
         color: "danger",
         role: "alert",
         "aria-live": "assertive"
-      }, optionalErrors);
+      }, optionalErrors), (0, _react2.jsx)(_spacer.EuiSpacer, {
+        size: "m"
+      }));
     });
   }
   var Element = component;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.euiCustomControl = void 0;
+exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = void 0;
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
@@ -59,14 +59,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-    inputGroupLabelBackground: isColorDark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.15) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5),
-    inputGroupBorder: 'none'
-  };
-
-  // Colors - specific to checkboxes, radios, switches, and range thumbs
-  var customControlColors = {
-    customControlDisabledIconColor: isColorDark ? (0, _services.shade)(euiTheme.colors.mediumShade, 0.38) : (0, _services.tint)(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.4) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.31)
+    appendPrependBackground: isColorDark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.15) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {
@@ -86,7 +79,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
       xxl: euiTheme.size.xxl
     }
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), iconSizes), controlLayout), {}, {
     animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
   });
 };
@@ -110,29 +103,6 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     autoFill: euiFormControlAutoFillStyles(euiThemeContext)
   };
 };
-var euiCustomControl = exports.euiCustomControl = function euiCustomControl(euiThemeContext) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var euiTheme = euiThemeContext.euiTheme;
-  var form = euiFormVariables(euiThemeContext);
-  var type = options.type,
-    _options$size = options.size,
-    size = _options$size === void 0 ? euiTheme.size.base : _options$size;
-  var padddingStyle = '';
-  var borderRadiusStyle = '';
-  if (size) {
-    var borderSize = parseFloat(String(euiTheme.border.width.thin));
-    var paddingSize = (0, _global_styling.mathWithUnits)(size, function (x) {
-      return (x - borderSize * 2) / 2;
-    });
-    padddingStyle = "padding: ".concat(paddingSize, ";");
-  }
-  if (type === 'round') {
-    borderRadiusStyle = "border-radius: ".concat(size, ";");
-  } else if (type === 'square') {
-    borderRadiusStyle = "border-radius: ".concat(form.controlCompressedBorderRadius, ";");
-  }
-  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition: background-color ").concat(form.animationTiming, ",\n        border-color ").concat(form.animationTiming, ";\n    }\n  ");
-};
 var euiFormControlText = exports.euiFormControlText = function euiFormControlText(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
@@ -141,22 +111,37 @@ var euiFormControlText = exports.euiFormControlText = function euiFormControlTex
   return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(form.textColor, ";\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlPlaceholderText, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$withBorder = _ref2.withBorder,
+    withBorder = _ref2$withBorder === void 0 ? true : _ref2$withBorder,
+    _ref2$withBackground = _ref2.withBackground,
+    withBackground = _ref2$withBackground === void 0 ? true : _ref2$withBackground,
+    _ref2$withBackgroundC = _ref2.withBackgroundColor,
+    withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC,
+    _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
+    withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
   var euiTheme = euiThemeContext.euiTheme;
   var form = euiFormVariables(euiThemeContext);
-  return "\n    /* We use inset box-shadow instead of border to skip extra hight calculations */\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    background-color: ").concat(form.backgroundColor, ";\n\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ").concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition:\n        box-shadow ").concat(form.animationTiming, ",\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ");
+
+  // We use inset box-shadow instead of border to skip extra height calculations
+  var border = "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim();
+  var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
+  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n  ").trim();
+  var backgroundAnimation = "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim();
+  return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n    ").concat(withBackgroundAnimation ? backgroundAnimation : '', "\n  ");
 };
-var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme,
+    colorMode = _ref3.colorMode;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
 };
-var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
-  return "\n    color: ".concat(form.controlDisabledColor, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.controlDisabledColor, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlDisabledColor, ";\n      opacity: 1;\n    ")), "\n  ");
+  return "\n    color: ".concat(form.controlDisabledColor, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.controlDisabledColor, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlDisabledColor, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 var euiFormControlReadOnlyStyles = exports.euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -188,4 +173,67 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
+};
+
+/**
+ * Selection custom controls - checkboxes, radios, and switches
+ */
+
+var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var sizes = {
+    control: euiTheme.size.base,
+    lineHeight: euiTheme.size.l,
+    labelGap: euiTheme.size.s
+  };
+  var colors = {
+    unselected: euiTheme.colors.emptyShade,
+    unselectedBorder: colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+    : (0, _services.shade)(euiTheme.colors.lightestShade, 0.4),
+    selected: euiTheme.colors.primary,
+    selectedIcon: euiTheme.colors.emptyShade,
+    disabled: euiTheme.colors.lightShade,
+    disabledIcon: euiTheme.colors.darkShade,
+    disabledLabel: euiTheme.colors.disabledText // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
+  };
+  var animation = {
+    speed: euiTheme.animation.fast,
+    easing: 'ease-in'
+  };
+  return {
+    sizes: sizes,
+    colors: colors,
+    animation: animation
+  };
+};
+var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlVars = euiFormCustomControlVariables(euiThemeContext);
+  var centerWithLabel = (0, _global_styling.mathWithUnits)([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
+    return (x - y) / 2;
+  });
+  return {
+    wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
+    input: {
+      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:has(+ label) {\n          ").concat((0, _global_styling.logicalCSS)('margin-top', centerWithLabel), "\n        }\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      enabled: {
+        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n        "),
+        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border: ").concat(euiTheme.border.width.thin, " solid ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
+      },
+      disabled: {
+        selected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabledIcon, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n        "),
+        unselected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabled, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n          cursor: not-allowed;\n        ")
+      },
+      // Looks better centered at different zoom levels than just <EuiIcon size="s" />
+      icon: "\n        transform: scale(0.75);\n      ",
+      // Hidden input sits on top of the visible element
+      hiddenInput: "\n        position: absolute;\n        inset: 0;\n        opacity: 0 !important;\n        cursor: pointer;\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n      "
+    },
+    label: {
+      label: "\n        /* Needs to use padding and not flex gap for extra mouse click area */\n        ".concat((0, _global_styling.logicalCSS)('padding-left', controlVars.sizes.labelGap), "\n        line-height: ").concat(controlVars.sizes.lineHeight, ";\n        font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n      "),
+      enabled: "\n        cursor: pointer;\n      ",
+      disabled: "\n        cursor: not-allowed;\n        color: ".concat(controlVars.colors.disabledLabel, ";\n      ")
+    }
+  };
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isRightSideIcon = exports.getIconAffordanceStyles = exports.getFormControlClassNameForIconCount = void 0;
+exports.isRightSideIcon = exports.getIconAffordanceStyles = void 0;
 var _form_control_layout_icons = require("./form_control_layout_icons");
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -17,40 +17,15 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-/**
- * The `getFormControlClassNameForIconCount` function helps setup the className appendum
- * depending on the form control's current settings/state.
- *
- * @param icon {boolean} Does it contain a static icon like arrowDown
- * @param clear {boolean} Is it currently clearable
- * @param isLoading {boolean} Is is currently loading
- * @param isInvalid {boolean} It is currently invalid
- * @param isDropdown {boolean} It is as dropdown
- * @returns {string | undefined} Returns the string to append to the base className of the form control; or `undefined` if all evaluate to false
- */
-
-var getFormControlClassNameForIconCount = exports.getFormControlClassNameForIconCount = function getFormControlClassNameForIconCount(_ref) {
+var isRightSideIcon = exports.isRightSideIcon = function isRightSideIcon(icon) {
+  return !!icon && (0, _form_control_layout_icons.isIconShape)(icon) && icon.side === 'right';
+};
+var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIconAffordanceStyles(_ref) {
   var icon = _ref.icon,
     clear = _ref.clear,
     isLoading = _ref.isLoading,
     isInvalid = _ref.isInvalid,
     isDropdown = _ref.isDropdown;
-  var numIcons = [icon, clear, isInvalid, isLoading, isDropdown].filter(function (item) {
-    return item === true;
-  }).length;
-
-  // This className is also specifically used in `src/global_styling/mixins/_form.scss`
-  return numIcons > 0 ? "euiFormControlLayout--".concat(numIcons, "icons") : undefined;
-};
-var isRightSideIcon = exports.isRightSideIcon = function isRightSideIcon(icon) {
-  return !!icon && (0, _form_control_layout_icons.isIconShape)(icon) && icon.side === 'right';
-};
-var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIconAffordanceStyles(_ref2) {
-  var icon = _ref2.icon,
-    clear = _ref2.clear,
-    isLoading = _ref2.isLoading,
-    isInvalid = _ref2.isInvalid,
-    isDropdown = _ref2.isDropdown;
   var cssVariables = {
     '--euiFormControlLeftIconsCount': 0,
     '--euiFormControlRightIconsCount': 0
@@ -66,9 +41,9 @@ var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIcon
   if (isLoading) cssVariables['--euiFormControlRightIconsCount']++;
   if (isInvalid) cssVariables['--euiFormControlRightIconsCount']++;
   if (isDropdown) cssVariables['--euiFormControlRightIconsCount']++;
-  var filtered = Object.entries(cssVariables).filter(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      count = _ref4[1];
+  var filtered = Object.entries(cssVariables).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      count = _ref3[1];
     return count > 0;
   });
   return filtered.length ? Object.fromEntries(filtered) : undefined;