@elastic/eui 95.7.0 → 95.8.0-backport.0

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

@@ -1,17 +1,8 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "helpText", "isInvalid", "error", "label", "labelType", "labelAppend", "hasEmptyLabelSpace", "fullWidth", "className", "describedByIds", "display", "hasChildLabel", "id", "isDisabled"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var _excluded = ["className", "children", "helpText", "isInvalid", "error", "label", "labelType", "labelAppend", "hasEmptyLabelSpace", "fullWidth", "describedByIds", "display", "hasChildLabel", "id", "isDisabled"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,202 +11,145 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { cloneElement, Component, Children } from 'react';
+import React, { cloneElement, Children, useState, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../../common';
-import { get } from '../../../services/objects';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../services';
+import { EuiSpacer } from '../../spacer';
 import { EuiFormHelpText } from '../form_help_text';
 import { EuiFormErrorText } from '../form_error_text';
 import { EuiFormLabel } from '../form_label';
-import { FormContext } from '../eui_form_context';
-import { htmlIdGenerator } from '../../../services/accessibility';
+import { useFormContext } from '../eui_form_context';
+import { euiFormRowStyles } from './form_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var displayToClassNameMap = {
-  row: null,
-  rowCompressed: 'euiFormRow--compressed',
-  columnCompressed: 'euiFormRow--compressed euiFormRow--horizontal',
-  center: null,
-  centerCompressed: 'euiFormRow--compressed',
-  columnCompressedSwitch: 'euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch'
-};
-export var DISPLAYS = keysOf(displayToClassNameMap);
-export var EuiFormRow = /*#__PURE__*/function (_Component) {
-  function EuiFormRow() {
-    var _this;
-    _classCallCheck(this, EuiFormRow);
-    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
-      _args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiFormRow, [].concat(_args));
-    _defineProperty(_this, "state", {
-      isFocused: false,
-      id: _this.props.id || htmlIdGenerator()()
+export var DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
+/**
+ * @deprecated
+ */
+'columnCompressedSwitch',
+/**
+ * @deprecated
+ */
+'rowCompressed'];
+export var EuiFormRow = function EuiFormRow(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    helpText = _ref.helpText,
+    isInvalid = _ref.isInvalid,
+    error = _ref.error,
+    label = _ref.label,
+    _ref$labelType = _ref.labelType,
+    labelType = _ref$labelType === void 0 ? 'label' : _ref$labelType,
+    labelAppend = _ref.labelAppend,
+    _ref$hasEmptyLabelSpa = _ref.hasEmptyLabelSpace,
+    hasEmptyLabelSpace = _ref$hasEmptyLabelSpa === void 0 ? false : _ref$hasEmptyLabelSpa,
+    _fullWidth = _ref.fullWidth,
+    describedByIds = _ref.describedByIds,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'row' : _ref$display,
+    _ref$hasChildLabel = _ref.hasChildLabel,
+    hasChildLabel = _ref$hasChildLabel === void 0 ? true : _ref$hasChildLabel,
+    propsId = _ref.id,
+    isDisabled = _ref.isDisabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useFormContext = useFormContext(),
+    defaultFullWidth = _useFormContext.defaultFullWidth;
+  var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
+  var id = useGeneratedHtmlId({
+    conditionalId: propsId
+  });
+  var hasLabel = label || labelAppend;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var onFocusWithin = useCallback(function () {
+    return setIsFocused(true);
+  }, []);
+  var onBlurWithin = useCallback(function () {
+    return setIsFocused(false);
+  }, []);
+  var classes = classNames('euiFormRow', {
+    'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
+    'euiFormRow--hasLabel': hasLabel
+  }, className);
+  var styles = useEuiMemoizedStyles(euiFormRowStyles);
+  var cssStyles = [styles.euiFormRow, fullWidth ? styles.fullWidth : styles.formWidth, styles[display]];
+  var optionalHelpTexts = useMemo(function () {
+    if (!helpText) return;
+    var helpTexts = Array.isArray(helpText) ? helpText : [helpText];
+    return helpTexts.map(function (helpText, i) {
+      var key = typeof helpText === 'string' ? helpText : i;
+      return ___EmotionJSX(EuiFormHelpText, {
+        key: key,
+        id: "".concat(id, "-help-").concat(i),
+        className: "euiFormRow__text"
+      }, helpText);
     });
-    _defineProperty(_this, "onFocus", function () {
-      // Doing this to allow onFocus to be called correctly from the child input element as this component overrides it
-      var onChildFocus = get(_this.props, 'children.props.onFocus');
-      if (onChildFocus) {
-        onChildFocus.apply(void 0, arguments);
-      }
-      _this.setState(function (_ref) {
-        var isFocused = _ref.isFocused;
-        if (!isFocused) {
-          return {
-            isFocused: true
-          };
-        } else {
-          return null;
-        }
-      });
+  }, [helpText, id]);
+  var optionalErrors = useMemo(function () {
+    if (!(error && isInvalid)) return;
+    var errorTexts = Array.isArray(error) ? error : [error];
+    return errorTexts.map(function (error, i) {
+      var key = typeof error === 'string' ? error : i;
+      return ___EmotionJSX(EuiFormErrorText, {
+        key: key,
+        id: "".concat(id, "-error-").concat(i),
+        className: "euiFormRow__text"
+      }, error);
     });
-    _defineProperty(_this, "onBlur", function () {
-      // Doing this to allow onBlur to be called correctly from the child input element as this component overrides it
-      var onChildBlur = get(_this.props, 'children.props.onBlur');
-      if (onChildBlur) {
-        onChildBlur.apply(void 0, arguments);
-      }
-      _this.setState({
-        isFocused: false
+  }, [error, isInvalid, id]);
+  var ariaDescribedBy = useMemo(function () {
+    var describingIds = _toConsumableArray(describedByIds || []);
+    if (optionalHelpTexts !== null && optionalHelpTexts !== void 0 && optionalHelpTexts.length) {
+      optionalHelpTexts.forEach(function (optionalHelpText) {
+        return describingIds.push(optionalHelpText.props.id);
       });
-    });
-    return _this;
-  }
-  _inherits(EuiFormRow, _Component);
-  return _createClass(EuiFormRow, [{
-    key: "render",
-    value: function render() {
-      var _ref3, _child$props$disabled;
-      var _ref2 = this.context,
-        defaultFullWidth = _ref2.defaultFullWidth;
-      var _this$props = this.props,
-        children = _this$props.children,
-        helpText = _this$props.helpText,
-        isInvalid = _this$props.isInvalid,
-        error = _this$props.error,
-        label = _this$props.label,
-        labelType = _this$props.labelType,
-        labelAppend = _this$props.labelAppend,
-        hasEmptyLabelSpace = _this$props.hasEmptyLabelSpace,
-        _this$props$fullWidth = _this$props.fullWidth,
-        fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
-        className = _this$props.className,
-        describedByIds = _this$props.describedByIds,
-        display = _this$props.display,
-        hasChildLabel = _this$props.hasChildLabel,
-        propsId = _this$props.id,
-        isDisabled = _this$props.isDisabled,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      var id = this.state.id;
-      var hasLabel = label || labelAppend;
-      var classes = classNames('euiFormRow', {
-        'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
-        'euiFormRow--fullWidth': fullWidth,
-        'euiFormRow--hasLabel': hasLabel
-      }, displayToClassNameMap[display],
-      // Safe use of ! as default prop is 'row'
-      className);
-      var optionalHelpTexts;
-      if (helpText) {
-        var helpTexts = Array.isArray(helpText) ? helpText : [helpText];
-        optionalHelpTexts = helpTexts.map(function (helpText, i) {
-          var key = typeof helpText === 'string' ? helpText : i;
-          return ___EmotionJSX(EuiFormHelpText, {
-            key: key,
-            id: "".concat(id, "-help-").concat(i),
-            className: "euiFormRow__text"
-          }, helpText);
-        });
-      }
-      var optionalErrors;
-      if (error && isInvalid) {
-        var errorTexts = Array.isArray(error) ? error : [error];
-        optionalErrors = errorTexts.map(function (error, i) {
-          var key = typeof error === 'string' ? error : i;
-          return ___EmotionJSX(EuiFormErrorText, {
-            key: key,
-            id: "".concat(id, "-error-").concat(i),
-            className: "euiFormRow__text"
-          }, error);
-        });
-      }
-      var optionalLabel;
-      var isLegend = label && labelType === 'legend' ? true : false;
-      var labelId = "".concat(id, "-label");
-      if (hasLabel) {
-        var labelProps = {};
-        if (isLegend) {
-          labelProps = {
-            type: labelType
-          };
-        } else {
-          labelProps = _objectSpread(_objectSpread({
-            htmlFor: hasChildLabel ? id : undefined
-          }, !isDisabled && {
-            isFocused: this.state.isFocused
-          }), {}, {
-            // If the row is disabled, don't pass the isFocused state.
-            type: labelType
-          });
-        }
-        optionalLabel = ___EmotionJSX("div", {
-          className: "euiFormRow__labelWrapper"
-        }, ___EmotionJSX(EuiFormLabel, _extends({
-          className: "euiFormRow__label",
-          isInvalid: isInvalid,
-          isDisabled: isDisabled,
-          "aria-invalid": isInvalid,
-          id: labelId
-        }, labelProps), label), labelAppend && ' ', labelAppend);
-      }
-      var optionalProps = {};
-      /**
-       * Safe use of ! as default prop is []
-       */
-      var describingIds = _toConsumableArray(describedByIds);
-      if (optionalHelpTexts) {
-        optionalHelpTexts.forEach(function (optionalHelpText) {
-          return describingIds.push(optionalHelpText.props.id);
-        });
-      }
-      if (optionalErrors) {
-        optionalErrors.forEach(function (error) {
-          return describingIds.push(error.props.id);
-        });
-      }
-      if (describingIds.length > 0) {
-        optionalProps['aria-describedby'] = describingIds.join(' ');
-      }
-      var child = Children.only(children);
-      var field = /*#__PURE__*/cloneElement(child, _objectSpread({
-        id: id,
-        // Allow the child's disabled or isDisabled prop to supercede the `isDisabled`
-        disabled: (_ref3 = (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : child.props.isDisabled) !== null && _ref3 !== void 0 ? _ref3 : isDisabled,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur
-      }, optionalProps));
-      var fieldWrapperClasses = classNames('euiFormRow__fieldWrapper', {
-        euiFormRow__fieldWrapperDisplayOnly:
-        /**
-         * Safe use of ! as default prop is 'row'
-         */
-        display.startsWith('center')
+    }
+    if (optionalErrors !== null && optionalErrors !== void 0 && optionalErrors.length) {
+      optionalErrors.forEach(function (error) {
+        return describingIds.push(error.props.id);
       });
-      var sharedProps = {
-        className: classes,
-        id: "".concat(id, "-row")
-      };
-      var contents = ___EmotionJSX(React.Fragment, null, optionalLabel, ___EmotionJSX("div", {
-        className: fieldWrapperClasses
-      }, field, optionalErrors, optionalHelpTexts));
-      return labelType === 'legend' ? ___EmotionJSX("fieldset", _extends({}, sharedProps, rest), contents) : ___EmotionJSX("div", _extends({}, sharedProps, rest), contents);
     }
-  }]);
-}(Component);
-_defineProperty(EuiFormRow, "contextType", FormContext);
-_defineProperty(EuiFormRow, "defaultProps", {
-  display: 'row',
-  hasEmptyLabelSpace: false,
-  describedByIds: [],
-  labelType: 'label',
-  hasChildLabel: true
-});
+    if (describingIds.length) {
+      return describingIds.join(' ');
+    }
+  }, [describedByIds, optionalHelpTexts, optionalErrors]);
+  var field = useMemo(function () {
+    var _ref2, _child$props$disabled;
+    var child = Children.only(children);
+    return /*#__PURE__*/cloneElement(child, {
+      id: id,
+      // Allow the child's disabled or isDisabled prop to supercede the `isDisabled`
+      disabled: (_ref2 = (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : child.props.isDisabled) !== null && _ref2 !== void 0 ? _ref2 : isDisabled,
+      'aria-describedby': ariaDescribedBy
+    });
+  }, [children, id, isDisabled, ariaDescribedBy]);
+  var Element = labelType === 'legend' ? 'fieldset' : 'div';
+  return ___EmotionJSX(Element, _extends({
+    css: cssStyles,
+    className: classes,
+    id: "".concat(id, "-row")
+  }, rest), hasLabel ? ___EmotionJSX("div", {
+    className: "euiFormRow__labelWrapper"
+  }, ___EmotionJSX(EuiFormLabel, _extends({
+    className: "euiFormRow__label",
+    "aria-invalid": isInvalid,
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isFocused: isFocused && !isDisabled,
+    id: "".concat(id, "-label")
+    // ExclusiveUnion shenanigans
+  }, labelType === 'legend' ? {
+    type: labelType
+  } : {
+    type: labelType,
+    htmlFor: hasChildLabel ? id : undefined
+  }), label), labelAppend && ' ', labelAppend) : hasEmptyLabelSpace && ___EmotionJSX(EuiSpacer, {
+    size: "m",
+    className: "euiFormRow__labelWrapper"
+  }), ___EmotionJSX("div", {
+    className: "euiFormRow__fieldWrapper",
+    onFocus: onFocusWithin,
+    onBlur: onBlurWithin
+  }, field, optionalErrors, optionalHelpTexts));
+};

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

@@ -0,0 +1,49 @@
+/*
+ * 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 } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+export var euiFormRowStyles = function euiFormRowStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    maxWidth = _euiFormVariables.maxWidth,
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  return {
+    euiFormRow: /*#__PURE__*/css("display:flex;+.euiButton{", logicalCSS('margin-top', euiTheme.size.base), ";};label:euiFormRow;"),
+    // Skip css`` to avoid generating an Emotion className
+    formWidth: "\n      ".concat(logicalCSS('max-width', maxWidth), "\n    "),
+    fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:fullWidth;"),
+    // Skip css`` to avoid generating an extra className
+    row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat(logicalCSS('margin-top', euiTheme.size.base), "\n      }\n    "),
+    // No difference from the uncompressed row for this current theme AFAICT
+    // TODO: Deprecate prop
+    get rowCompressed() {
+      return this.row;
+    },
+    columnCompressed: /*#__PURE__*/css("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", logicalCSS('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", logicalCSS('min-width', 0), ";}+.euiFormRow{", logicalCSS('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", logicalCSS('margin-top', euiTheme.size.m), ";}&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
+    // Handled by :has CSS now rather than a separate modifier/prop
+    // TODO: Deprecate prop
+    get columnCompressedSwitch() {
+      return this.columnCompressed;
+    },
+    // Center display is primarily for inline form rows, which may have have
+    // field content that is shorter than form controls (e.g. switches, text),
+    // and should vertically center said content
+    centerDisplayCss: function centerDisplayCss(compressed) {
+      return "\n      .euiFormRow__fieldWrapper {\n        display: flex;\n        align-items: center;\n        ".concat(logicalCSS('min-height', compressed ? controlCompressedHeight : controlHeight), "\n      }\n    ");
+    },
+    get center() {
+      return /*#__PURE__*/css(this.row, " ", this.centerDisplayCss(false), ";;label:center;");
+    },
+    get centerCompressed() {
+      return /*#__PURE__*/css(this.row, " ", this.centerDisplayCss(true), ";;label:centerCompressed;");
+    }
+  };
+};

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

@@ -11,6 +11,9 @@ var _excluded = ["className", "id", "name", "checked", "label", "value", "onChan
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiIcon } from '../../icon';
+import { euiRadioStyles } from './radio.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRadio = function EuiRadio(_ref) {
   var className = _ref.className,
@@ -24,20 +27,22 @@ export var EuiRadio = function EuiRadio(_ref) {
     autoFocus = _ref.autoFocus,
     labelProps = _ref.labelProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiRadio', {
-    'euiRadio--noLabel': !label
-  }, className);
+  var classes = classNames('euiRadio', className);
+  var styles = useEuiMemoizedStyles(euiRadioStyles);
+  var inputStyles = [styles.input.euiRadio__circle, disabled ? checked ? styles.input.disabled.selected : styles.input.disabled.unselected : checked ? styles.input.enabled.selected : styles.input.enabled.unselected];
   var labelClasses = classNames('euiRadio__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
-  var optionalLabel;
-  if (label) {
-    optionalLabel = ___EmotionJSX("label", _extends({}, labelProps, {
-      className: labelClasses,
-      htmlFor: id
-    }), label);
-  }
+  var labelStyles = [styles.label.euiRadio__label, disabled ? styles.label.disabled : styles.label.enabled, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
   return ___EmotionJSX("div", _extends({
+    css: styles.euiRadio,
     className: classes
-  }, rest), ___EmotionJSX("input", {
+  }, rest), ___EmotionJSX("div", {
+    css: inputStyles,
+    className: "euiRadio__circle"
+  }, ___EmotionJSX(EuiIcon, {
+    css: styles.input.euiRadio__icon,
+    type: "dot"
+  }), ___EmotionJSX("input", {
+    css: styles.input.euiRadio__input,
     className: "euiRadio__input",
     type: "radio",
     id: id,
@@ -47,7 +52,9 @@ export var EuiRadio = function EuiRadio(_ref) {
     onChange: onChange,
     disabled: disabled,
     autoFocus: autoFocus
-  }), ___EmotionJSX("div", {
-    className: "euiRadio__circle"
-  }), optionalLabel);
+  })), label && ___EmotionJSX("label", _extends({}, labelProps, {
+    css: labelStyles,
+    className: labelClasses,
+    htmlFor: id
+  }), label));
 };

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiFormCustomControlStyles } from '../form.styles';
+export var euiRadioStyles = function euiRadioStyles(euiThemeContext) {
+  var controlStyles = euiFormCustomControlStyles(euiThemeContext);
+  return {
+    euiRadio: /*#__PURE__*/css(controlStyles.wrapper, ";label:euiRadio;"),
+    input: {
+      euiRadio__circle: /*#__PURE__*/css(controlStyles.input.fauxInput, " border-radius:50%;;label:euiRadio__circle;"),
+      enabled: {
+        selected: /*#__PURE__*/css(controlStyles.input.enabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/css(controlStyles.input.enabled.unselected, ";label:unselected;")
+      },
+      disabled: {
+        selected: /*#__PURE__*/css(controlStyles.input.disabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/css(controlStyles.input.disabled.unselected, ";label:unselected;")
+      },
+      euiRadio__icon: /*#__PURE__*/css(controlStyles.input.icon, ";label:euiRadio__icon;"),
+      euiRadio__input: /*#__PURE__*/css(controlStyles.input.hiddenInput, ";label:euiRadio__input;")
+    },
+    label: {
+      euiRadio__label: /*#__PURE__*/css(controlStyles.label.label, ";label:euiRadio__label;"),
+      enabled: controlStyles.label.enabled,
+      disabled: /*#__PURE__*/css(controlStyles.label.disabled, ";label:disabled;")
+    }
+  };
+};

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

@@ -79,7 +79,7 @@ export var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(eu
 };
 export var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    border-radius: 50%;\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
 };
 export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
   return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");

package/optimize/es/components/form/range/range_input.styles.js

@@ -10,6 +10,6 @@ import { css } from '@emotion/react';
 export var euiRangeInputStyles = function euiRangeInputStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &{margin:0;inline-size:100%;};label:euiRangeInput;")
+    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
   };
 };

package/optimize/es/components/form/range/range_slider.styles.js

@@ -8,15 +8,12 @@
 
 import { css } from '@emotion/react';
 import { transparentize } from '../../../services';
-import { euiCustomControl } from '../form.styles';
 import { euiRangeThumbStyle, euiRangeThumbPerBrowser, euiRangeVariables, euiRangeTrackPerBrowser, euiRangeThumbFocus } from './range.styles';
 export var euiRangeSliderStyles = function euiRangeSliderStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
-    euiRangeSlider: /*#__PURE__*/css("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", euiRangeThumbPerBrowser("\n        ".concat(euiCustomControl(euiThemeContext, {
-      type: 'round'
-    }), "\n        ").concat(euiRangeThumbStyle(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", euiRangeThumbPerBrowser('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", euiRangeThumbPerBrowser(euiRangeThumbFocus(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
+    euiRangeSlider: /*#__PURE__*/css("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", euiRangeThumbPerBrowser("\n        ".concat(euiRangeThumbStyle(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", euiRangeThumbPerBrowser('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", euiRangeThumbPerBrowser(euiRangeThumbFocus(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
     hasTicks: /*#__PURE__*/css("block-size:", range.thumbHeight, ";;label:hasTicks;"),
     hasRange: /*#__PURE__*/css(euiRangeTrackPerBrowser("\n        background-color: transparent;\n        border-color: ".concat(transparentize(range.trackBorderColor, 0.6), "\n      ")), ";;label:hasRange;"),
     hasLevels: /*#__PURE__*/css(euiRangeThumbPerBrowser("background-color: ".concat(range.thumbBackgroundColor)), ";;label:hasLevels;")

package/optimize/es/components/form/range/range_thumb.styles.js

@@ -10,7 +10,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { mathWithUnits } from '../../../global_styling';
 import { euiRangeThumbStyle, euiRangeThumbFocus, euiRangeVariables } from './range.styles';
-import { euiCustomControl } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "9ugg7u-hasTicks",
   styles: "inset-block-start:0;margin-block-start:0;label:hasTicks;"
@@ -23,9 +22,7 @@ export var euiRangeThumbStyles = function euiRangeThumbStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
-    euiRangeThumb: /*#__PURE__*/css(euiCustomControl(euiThemeContext, {
-      type: 'round'
-    }), " ", euiRangeThumbStyle(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
+    euiRangeThumb: /*#__PURE__*/css(euiRangeThumbStyle(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
       return x / 2 * -1;
     }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", euiRangeThumbFocus(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
     hasTicks: _ref