@elastic/eui 95.7.0 → 95.8.0-backport.0

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

@@ -13,10 +13,12 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 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(),
@@ -36,15 +38,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
@@ -65,15 +70,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,
@@ -81,8 +88,9 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
   }, title), renderedDescription), ___EmotionJSX(EuiFlexItem, _extends({
     grow: fieldGrowth
   }, fieldFlexItemProps, {
+    css: fieldColumnStyles,
     className: fieldClasses
-  }), children)));
+  }), children));
 };
 EuiDescribedFormGroup.propTypes = {
   className: PropTypes.string,

package/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/es/components/form/field_number/field_number.js

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

package/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/es/components/form/field_password/field_password.js

@@ -1,4 +1,4 @@
-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"];
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -39,6 +39,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,
@@ -88,14 +89,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;
@@ -115,6 +116,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
     append: finalAppend
@@ -128,6 +130,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     className: classes,
     css: cssStyles,
     value: value,
+    disabled: disabled,
     ref: setInputRef
   }, rest))));
 };

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

@@ -1,4 +1,4 @@
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -27,8 +27,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 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';
@@ -160,6 +161,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,
@@ -175,7 +177,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,
@@ -183,32 +185,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);

package/es/components/form/field_text/field_text.js

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

package/es/components/form/form.js

@@ -10,11 +10,12 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { useCallback, forwardRef } from 'react';
+import React, { useCallback, useMemo, forwardRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiCallOut } from '../call_out';
 import { EuiI18n } from '../i18n';
+import { EuiSpacer } from '../spacer';
 import { FormContext } from './eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -28,7 +29,7 @@ export var EuiForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
     invalidCallout = _ref$invalidCallout === void 0 ? 'above' : _ref$invalidCallout,
     fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var formContext = React.useMemo(function () {
+  var formContext = useMemo(function () {
     return {
       defaultFullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : false
     };
@@ -53,7 +54,7 @@ export var EuiForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
       token: "euiForm.addressFormErrors",
       default: "Please address the highlighted errors."
     }, function (addressFormErrors) {
-      return ___EmotionJSX(EuiCallOut, {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCallOut, {
         tabIndex: -1,
         ref: handleFocus,
         className: "euiForm__errors",
@@ -61,7 +62,9 @@ export var EuiForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
         color: "danger",
         role: "alert",
         "aria-live": "assertive"
-      }, optionalErrors);
+      }, optionalErrors), ___EmotionJSX(EuiSpacer, {
+        size: "m"
+      }));
     });
   }
   var Element = component;

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

@@ -56,14 +56,7 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    inputGroupLabelBackground: isColorDark ? shade(euiTheme.colors.lightShade, 0.15) : tint(euiTheme.colors.lightShade, 0.5),
-    inputGroupBorder: 'none'
-  };
-
-  // Colors - specific to checkboxes, radios, switches, and range thumbs
-  var customControlColors = {
-    customControlDisabledIconColor: isColorDark ? shade(euiTheme.colors.mediumShade, 0.38) : tint(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? shade(euiTheme.colors.lightestShade, 0.4) : tint(euiTheme.colors.lightestShade, 0.31)
+    appendPrependBackground: isColorDark ? shade(euiTheme.colors.lightShade, 0.15) : tint(euiTheme.colors.lightShade, 0.5)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: mathWithUnits(controlHeight, function (x) {
@@ -83,7 +76,7 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
       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")
   });
 };
@@ -107,29 +100,6 @@ export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext)
     autoFill: euiFormControlAutoFillStyles(euiThemeContext)
   };
 };
-export var 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 = 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(euiCanAnimate, " {\n      transition: background-color ").concat(form.animationTiming, ",\n        border-color ").concat(form.animationTiming, ";\n    }\n  ");
-};
 export var euiFormControlText = function euiFormControlText(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFontSize = euiFontSize(euiThemeContext, 's'),
@@ -138,22 +108,37 @@ export var euiFormControlText = function euiFormControlText(euiThemeContext) {
   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  ");
 };
 export var 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(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(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  ");
 };
-export var euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+export var euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme,
+    colorMode = _ref3.colorMode;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? 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");
 };
-export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
 };
 export var 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  ");
 };
 export var euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -185,4 +170,67 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
 };
 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
+ */
+
+export var 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' ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+    : 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
+  };
+};
+export var euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlVars = euiFormCustomControlVariables(euiThemeContext);
+  var centerWithLabel = 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(logicalCSS('height', controlVars.sizes.control), "\n        ").concat(logicalCSS('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:has(+ label) {\n          ").concat(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(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(logicalCSS('padding-left', controlVars.sizes.labelGap), "\n        line-height: ").concat(controlVars.sizes.lineHeight, ";\n        font-size: ").concat(euiFontSize(euiThemeContext, 's').fontSize, ";\n      "),
+      enabled: "\n        cursor: pointer;\n      ",
+      disabled: "\n        cursor: not-allowed;\n        color: ".concat(controlVars.colors.disabledLabel, ";\n      ")
+    }
+  };
 };

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

@@ -13,41 +13,15 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  */
 
 import { isIconShape } from './form_control_layout_icons';
-
-/**
- * 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
- */
-
-export var getFormControlClassNameForIconCount = function getFormControlClassNameForIconCount(_ref) {
+export var isRightSideIcon = function isRightSideIcon(icon) {
+  return !!icon && isIconShape(icon) && icon.side === 'right';
+};
+export var 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;
-};
-export var isRightSideIcon = function isRightSideIcon(icon) {
-  return !!icon && isIconShape(icon) && icon.side === 'right';
-};
-export var 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
@@ -63,9 +37,9 @@ export var getIconAffordanceStyles = function getIconAffordanceStyles(_ref2) {
   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;