@elastic/eui 95.7.0 → 95.8.0-backport.0

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

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

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

@@ -9,10 +9,11 @@ var _excluded = ["children", "className", "isInvalid", "error", "component", "in
  * Side Public License, v 1.
  */
 
-import React, { useCallback, forwardRef } from 'react';
+import React, { useCallback, useMemo, forwardRef } from 'react';
 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) {
@@ -26,7 +27,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
     };
@@ -51,7 +52,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",
@@ -59,7 +60,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/optimize/es/components/form/form.styles.js

@@ -53,14 +53,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) {
@@ -80,7 +73,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")
   });
 };
@@ -104,29 +97,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'),
@@ -135,22 +105,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);
@@ -182,4 +167,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/optimize/es/components/form/form_control_layout/_num_icons.js

@@ -8,41 +8,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 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
@@ -58,9 +32,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;

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

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "clear", "isDropdown", "isLoading", "isInvalid", "isDisabled", "readOnly", "compressed", "prepend", "append", "fullWidth"];
+var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "clear", "isDropdown", "isLoading", "isInvalid", "isDisabled", "readOnly", "compressed", "prepend", "append", "isDelimited", "wrapperProps", "fullWidth"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,12 +13,14 @@ var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "c
  * Side Public License, v 1.
  */
 
-import React, { cloneElement, useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { getIconAffordanceStyles, isRightSideIcon } from './_num_icons';
-import { EuiFormControlLayoutIcons } from './form_control_layout_icons';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiFormLabel } from '../form_label';
 import { useFormContext } from '../eui_form_context';
+import { getIconAffordanceStyles, isRightSideIcon } from './_num_icons';
+import { EuiFormControlLayoutIcons } from './form_control_layout_icons';
+import { euiFormControlLayoutStyles, euiFormControlLayoutSideNodeStyles } from './form_control_layout.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormControlLayout = function EuiFormControlLayout(props) {
   var _useFormContext = useFormContext(),
@@ -34,16 +40,20 @@ export var EuiFormControlLayout = function EuiFormControlLayout(props) {
     compressed = props.compressed,
     prepend = props.prepend,
     append = props.append,
+    isDelimited = props.isDelimited,
+    wrapperProps = props.wrapperProps,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     rest = _objectWithoutProperties(props, _excluded);
+  var isGroup = !!(prepend || append || isDelimited);
   var classes = classNames('euiFormControlLayout', {
-    'euiFormControlLayout--fullWidth': fullWidth,
-    'euiFormControlLayout--compressed': compressed,
-    'euiFormControlLayout--readOnly': readOnly,
-    'euiFormControlLayout--group': prepend || append,
-    'euiFormControlLayout-isDisabled': isDisabled
+    'euiFormControlLayout--group': isGroup && !isDelimited,
+    'euiFormControlLayout-isDisabled': isDisabled,
+    'euiFormControlLayout-readOnly': readOnly
   }, className);
+  var styles = useEuiMemoizedStyles(euiFormControlLayoutStyles);
+  var cssStyles = [styles.euiFormControlLayout, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth].concat(_toConsumableArray(isGroup ? [styles.group.group, compressed ? styles.group.compressed : styles.group.uncompressed] : []));
+  var childrenWrapperStyles = [styles.children.euiFormControlLayout__childrenWrapper, isGroup && styles.children.inGroup, isGroup && !append && styles.children.prependOnly, isGroup && !prepend && styles.children.appendOnly, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var hasDropdownIcon = !readOnly && !isDisabled && isDropdown;
   var hasRightIcon = isRightSideIcon(icon);
   var hasLeftIcon = icon && !hasRightIcon;
@@ -60,19 +70,23 @@ export var EuiFormControlLayout = function EuiFormControlLayout(props) {
     });
   }, [iconsPosition, icon, clear, isInvalid, isLoading, hasDropdownIcon]);
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), ___EmotionJSX(EuiFormControlLayoutSideNodes, {
     side: "prepend",
     nodes: prepend,
-    inputId: inputId
-  }), ___EmotionJSX("div", {
-    className: "euiFormControlLayout__childrenWrapper",
-    style: iconAffordanceStyles
-  }, hasLeftIcon && ___EmotionJSX(EuiFormControlLayoutIcons, {
+    inputId: inputId,
+    compressed: compressed
+  }), ___EmotionJSX("div", _extends({}, wrapperProps, {
+    css: childrenWrapperStyles,
+    className: classNames('euiFormControlLayout__childrenWrapper', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className),
+    style: _objectSpread(_objectSpread({}, iconAffordanceStyles), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style)
+  }), hasLeftIcon && ___EmotionJSX(EuiFormControlLayoutIcons, {
     side: "left",
     icon: icon,
     iconsPosition: iconsPosition,
-    compressed: compressed
+    compressed: compressed,
+    isDisabled: isDisabled
   }), children, hasRightIcons && ___EmotionJSX(EuiFormControlLayoutIcons, {
     side: "right",
     icon: hasRightIcon ? icon : undefined,
@@ -81,11 +95,13 @@ export var EuiFormControlLayout = function EuiFormControlLayout(props) {
     clear: clear,
     isLoading: isLoading,
     isInvalid: isInvalid,
-    isDropdown: hasDropdownIcon
+    isDropdown: hasDropdownIcon,
+    isDisabled: isDisabled
   })), ___EmotionJSX(EuiFormControlLayoutSideNodes, {
     side: "append",
     nodes: append,
-    inputId: inputId
+    inputId: inputId,
+    compressed: compressed
   }));
 };
 
@@ -95,19 +111,18 @@ export var EuiFormControlLayout = function EuiFormControlLayout(props) {
 var EuiFormControlLayoutSideNodes = function EuiFormControlLayoutSideNodes(_ref) {
   var side = _ref.side,
     nodes = _ref.nodes,
-    inputId = _ref.inputId;
+    inputId = _ref.inputId,
+    compressed = _ref.compressed;
   var className = "euiFormControlLayout__".concat(side);
-  var renderFormLabel = useCallback(function (label) {
-    return ___EmotionJSX(EuiFormLabel, {
-      htmlFor: inputId,
-      className: className
-    }, label);
-  }, [inputId, className]);
+  var styles = useEuiMemoizedStyles(euiFormControlLayoutSideNodeStyles);
+  var cssStyles = [styles.euiFormControlLayout__side, styles[side], compressed ? styles.compressed : styles.uncompressed];
   if (!nodes) return null;
-  return ___EmotionJSX(React.Fragment, null, React.Children.map(nodes, function (node, index) {
-    return typeof node === 'string' ? renderFormLabel(node) : /*#__PURE__*/cloneElement(node, {
-      className: classNames(className, node.props.className),
-      key: index
-    });
+  return ___EmotionJSX("div", {
+    css: cssStyles,
+    className: className
+  }, React.Children.map(nodes, function (node) {
+    return typeof node === 'string' ? ___EmotionJSX(EuiFormLabel, {
+      htmlFor: inputId
+    }, node) : node;
   }));
 };

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

@@ -0,0 +1,72 @@
+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 { euiTextTruncate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1w10n1m-inGroup",
+  styles: "flex-grow:1;overflow:hidden;label:inGroup;"
+} : {
+  name: "1w10n1m-inGroup",
+  styles: "flex-grow:1;overflow:hidden;label:inGroup;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1lbfa6m-euiFormControlLayout__childrenWrapper",
+  styles: "position:relative;label:euiFormControlLayout__childrenWrapper;"
+} : {
+  name: "1lbfa6m-euiFormControlLayout__childrenWrapper",
+  styles: "position:relative;label:euiFormControlLayout__childrenWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
+  return {
+    euiFormControlLayout: /*#__PURE__*/css(";label:euiFormControlLayout;"),
+    // Skip the css`` on the default height to avoid generating a className
+    uncompressed: "\n      ".concat(logicalCSS('height', form.controlHeight), "\n    "),
+    compressed: /*#__PURE__*/css(logicalCSS('height', form.controlCompressedHeight), ";;label:compressed;"),
+    // Skip the css`` on the default width to avoid generating a className
+    formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
+    fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " ", logicalCSS('width', '100%'), ";;label:fullWidth;"),
+    group: {
+      group: /*#__PURE__*/css("display:flex;align-items:stretch;border:", euiTheme.border.width.thin, " solid ", form.borderColor, ";background-color:", form.backgroundColor, ";overflow:hidden;>*{", logicalCSS('height', '100%'), ";};label:group;"),
+      // Skipping css`` to avoid repeated compressed/uncompressed classNames
+      uncompressed: "\n        border-radius: ".concat(form.controlBorderRadius, ";\n      "),
+      compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      ")
+    },
+    children: {
+      euiFormControlLayout__childrenWrapper: _ref2,
+      inGroup: _ref,
+      prependOnly: /*#__PURE__*/css(logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ";;label:prependOnly;"),
+      appendOnly: /*#__PURE__*/css(logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), ";;label:appendOnly;")
+    }
+  };
+};
+export var euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
+  var uncompressedHeight = mathWithUnits([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
+    return x - y * 2;
+  });
+  var compressedHeight = mathWithUnits([form.controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+    return x - y * 2;
+  });
+  var buttons = '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon)';
+  var text = '*:is(.euiFormLabel, .euiText)';
+  return {
+    euiFormControlLayout__side: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", euiTextTruncate('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", logicalCSS('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", logicalCSS('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
+    append: /*#__PURE__*/css(";label:append;"),
+    prepend: /*#__PURE__*/css(";label:prepend;"),
+    uncompressed: "\n      ".concat(text, " {\n        ").concat(logicalCSS('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat(logicalCSS('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat(logicalCSS('width', euiTheme.size.xl), "\n      }\n    "),
+    compressed: /*#__PURE__*/css(text, "{", logicalCSS('padding-horizontal', euiTheme.size.xxs), " line-height:", compressedHeight, ";}", buttons, "{", logicalCSS('height', compressedHeight), ";}.euiButtonIcon{flex-shrink:0;", logicalCSS('width', euiTheme.size.xl), ";};label:compressed;")
+  };
+};

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

@@ -11,34 +11,31 @@ var _excluded = ["className", "onClick", "size"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../../common';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
-import { EuiI18n } from '../../i18n';
+import { useEuiI18n } from '../../i18n';
+import { EuiFormControlLayoutClearButtonStyles } from './form_control_layout_clear_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var sizeToClassNameMap = {
-  s: 'euiFormControlLayoutClearButton--small',
-  m: null
-};
-export var SIZES = keysOf(sizeToClassNameMap);
 export var EuiFormControlLayoutClearButton = function EuiFormControlLayoutClearButton(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiFormControlLayoutClearButton', sizeToClassNameMap[size], className);
-  return ___EmotionJSX(EuiI18n, {
-    token: "euiFormControlLayoutClearButton.label",
-    default: "Clear input"
-  }, function (label) {
-    return ___EmotionJSX("button", _extends({
-      type: "button",
-      className: classes,
-      onClick: onClick,
-      "aria-label": label
-    }, rest), ___EmotionJSX(EuiIcon, {
-      className: "euiFormControlLayoutClearButton__icon",
-      type: "cross"
-    }));
-  });
+  var classes = classNames('euiFormControlLayoutClearButton', className);
+  var styles = useEuiMemoizedStyles(EuiFormControlLayoutClearButtonStyles);
+  var iconStyles = [styles.euiFormControlLayoutClearButton__icon, styles.size[size]];
+  var ariaLabel = useEuiI18n('euiFormControlLayoutClearButton.label', 'Clear input');
+  return ___EmotionJSX("button", _extends({
+    type: "button",
+    css: styles.euiFormControlLayoutClearButton,
+    className: classes,
+    onClick: onClick,
+    "aria-label": ariaLabel
+  }, rest), ___EmotionJSX(EuiIcon, {
+    css: iconStyles,
+    className: "euiFormControlLayoutClearButton__icon",
+    type: "cross",
+    size: size
+  }));
 };

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

@@ -0,0 +1,22 @@
+/*
+ * 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';
+export var EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
+  var backgroundColor = colorMode === 'DARK' ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
+  return {
+    euiFormControlLayoutClearButton: /*#__PURE__*/css("pointer-events:all;background-color:", backgroundColor, ";border-radius:50%;line-height:0;&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
+    euiFormControlLayoutClearButton__icon: /*#__PURE__*/css("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+    size: {
+      s: /*#__PURE__*/css("stroke-width:", euiTheme.size.xs, ";;label:s;"),
+      m: /*#__PURE__*/css("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+    }
+  };
+};

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "onClick", "type", "iconRef", "size", "color"];
+var _excluded = ["className", "onClick", "type", "iconRef", "size", "color", "disabled"];
+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
@@ -10,6 +11,7 @@ var _excluded = ["className", "onClick", "type", "iconRef", "size", "color"];
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 import { EuiIcon } from '../../icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -20,14 +22,16 @@ export var EuiFormControlLayoutCustomIcon = function EuiFormControlLayoutCustomI
     iconRef = _ref.iconRef,
     size = _ref.size,
     color = _ref.color,
+    disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiFormControlLayoutCustomIcon', className, {
-    'euiFormControlLayoutCustomIcon--clickable': onClick
-  });
+  var classes = classNames('euiFormControlLayoutCustomIcon', className);
+  var cssStyles = [styles.euiFormControlLayoutCustomIcon, onClick ? styles.clickable : styles.unclickable];
   if (onClick) {
     return ___EmotionJSX("button", _extends({
       type: "button",
       onClick: onClick,
+      disabled: disabled,
+      css: cssStyles,
       className: classes,
       ref: iconRef
     }, rest), ___EmotionJSX(EuiIcon, {
@@ -39,6 +43,7 @@ export var EuiFormControlLayoutCustomIcon = function EuiFormControlLayoutCustomI
     }));
   }
   return ___EmotionJSX("span", _extends({
+    css: cssStyles,
     className: classes,
     ref: iconRef
   }, rest), ___EmotionJSX(EuiIcon, {
@@ -48,4 +53,24 @@ export var EuiFormControlLayoutCustomIcon = function EuiFormControlLayoutCustomI
     type: type,
     color: color
   }));
+};
+var styles = {
+  euiFormControlLayoutCustomIcon: process.env.NODE_ENV === "production" ? {
+    name: "7d1ma8-euiFormControlLayoutCustomIcon",
+    styles: "font-size:0;label:euiFormControlLayoutCustomIcon;"
+  } : {
+    name: "7d1ma8-euiFormControlLayoutCustomIcon",
+    styles: "font-size:0;label:euiFormControlLayoutCustomIcon;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  // Skip css`` here to avoid generating an Emotion className
+  unclickable: "\n    pointer-events: none;\n  ",
+  clickable: process.env.NODE_ENV === "production" ? {
+    name: "1j8wgxj-clickable",
+    styles: "pointer-events:all;&:disabled{cursor:not-allowed;color:currentColor;};label:clickable;"
+  } : {
+    name: "1j8wgxj-clickable",
+    styles: "pointer-events:all;&:disabled{cursor:not-allowed;color:currentColor;};label:clickable;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };