@elastic/eui 67.1.2 → 69.0.0

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

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -5,7 +11,97 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return "".concat(euiTheme.base * 25, "px");
+import { shade, tint, darken, transparentize, makeHighContrastColor } from '../../services';
+import { mathWithUnits, euiCanAnimate } from '../../global_styling';
+export var euiFormVariables = function euiFormVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var isColorDark = colorMode === 'DARK';
+  var backgroundColor = isColorDark ? shade(euiTheme.colors.lightestShade, 0.4) : tint(euiTheme.colors.lightestShade, 0.6);
+  var controlHeight = euiTheme.size.xxl;
+  var controlCompressedHeight = euiTheme.size.xl;
+  var sizes = {
+    maxWidth: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 25;
+    }),
+    controlHeight: controlHeight,
+    controlCompressedHeight: controlCompressedHeight,
+    controlPadding: euiTheme.size.m,
+    controlCompressedPadding: euiTheme.size.s,
+    controlBorderRadius: euiTheme.border.radius.medium,
+    controlCompressedBorderRadius: euiTheme.border.radius.small
+  };
+  var colors = {
+    backgroundColor: backgroundColor,
+    backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.1),
+    backgroundReadOnlyColor: euiTheme.colors.emptyShade,
+    borderColor: transparentize(euiTheme.border.color, 0.9),
+    borderDisabledColor: transparentize(euiTheme.border.color, 0.9),
+    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 for checkboxes and radios
+
+  var customControlColors = {
+    customControlDisabledIconColor: isColorDark ? shade(euiTheme.colors.mediumShade, 0.38) : tint(euiTheme.colors.mediumShade, 0.485),
+    customControlBorderColor: isColorDark ? shade(euiTheme.colors.lightestShade, 0.18) : tint(euiTheme.colors.lightestShade, 0.3)
+  };
+  var controlLayout = {
+    controlLayoutGroupInputHeight: mathWithUnits(controlHeight, function (x) {
+      return x - 2;
+    }),
+    controlLayoutGroupInputCompressedHeight: mathWithUnits(controlCompressedHeight, function (x) {
+      return x - 2;
+    }),
+    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small
+  };
+  var iconSizes = {
+    controlIconSize: {
+      s: euiTheme.size.m,
+      m: euiTheme.size.base,
+      l: euiTheme.size.l,
+      xl: euiTheme.size.xl,
+      xxl: euiTheme.size.xxl
+    }
+  };
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout);
+};
+export var euiFormControlSize = function euiFormControlSize(euiThemeContext) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var form = euiFormVariables(euiThemeContext);
+  var width = '100%';
+  var maxWidth = form.maxWidth;
+  if (options.fullWidth) maxWidth = '100%';
+  var height = options.height || form.controlHeight;
+  if (options.compressed) height = form.controlCompressedHeight;
+  if (options.inGroup) height = '100%';
+  return "\n    max-inline-size: ".concat(maxWidth, ";\n    inline-size: ").concat(width, ";\n    block-size: ").concat(height, ";\n  ");
+};
+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(euiTheme.animation.fast, " ease-in,\n              border-color ").concat(euiTheme.animation.fast, " ease-in;\n    }\n  ");
 };

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

@@ -5,6 +5,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "icon", "clear", "fullWidth", "isLoading", "isDisabled", "compressed", "className", "prepend", "append", "readOnly", "isInvalid", "isDropdown", "inputId"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -22,6 +23,7 @@ import React, { cloneElement, Component } from 'react';
 import classNames from 'classnames';
 import { EuiFormControlLayoutIcons } from './form_control_layout_icons';
 import { EuiFormLabel } from '../form_label';
+import { FormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export { ICON_SIDES } from './form_control_layout_icons';
 export var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
@@ -38,11 +40,15 @@ export var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
   _createClass(EuiFormControlLayout, [{
     key: "render",
     value: function render() {
+      var _ref = this.context,
+          defaultFullWidth = _ref.defaultFullWidth;
+
       var _this$props = this.props,
           children = _this$props.children,
           icon = _this$props.icon,
           clear = _this$props.clear,
-          fullWidth = _this$props.fullWidth,
+          _this$props$fullWidth = _this$props.fullWidth,
+          fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
           isLoading = _this$props.isLoading,
           isDisabled = _this$props.isDisabled,
           compressed = _this$props.compressed,
@@ -114,4 +120,6 @@ export var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
   }]);
 
   return EuiFormControlLayout;
-}(Component);
+}(Component);
+
+_defineProperty(EuiFormControlLayout, "contextType", FormContext);

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

@@ -32,6 +32,7 @@ import { get } from '../../../services/objects';
 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 { jsx as ___EmotionJSX } from "@emotion/react";
 var displayToClassNameMap = {
@@ -104,7 +105,10 @@ export var EuiFormRow = /*#__PURE__*/function (_Component) {
   _createClass(EuiFormRow, [{
     key: "render",
     value: function render() {
-      var _ref2, _child$props$disabled;
+      var _ref3, _child$props$disabled;
+
+      var _ref2 = this.context,
+          defaultFullWidth = _ref2.defaultFullWidth;
 
       var _this$props = this.props,
           children = _this$props.children,
@@ -115,7 +119,8 @@ export var EuiFormRow = /*#__PURE__*/function (_Component) {
           labelType = _this$props.labelType,
           labelAppend = _this$props.labelAppend,
           hasEmptyLabelSpace = _this$props.hasEmptyLabelSpace,
-          fullWidth = _this$props.fullWidth,
+          _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,
@@ -220,7 +225,7 @@ export var EuiFormRow = /*#__PURE__*/function (_Component) {
       var field = /*#__PURE__*/cloneElement(child, _objectSpread({
         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,
+        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));
@@ -247,10 +252,11 @@ export var EuiFormRow = /*#__PURE__*/function (_Component) {
   return EuiFormRow;
 }(Component);
 
+_defineProperty(EuiFormRow, "contextType", FormContext);
+
 _defineProperty(EuiFormRow, "defaultProps", {
   display: 'row',
   hasEmptyLabelSpace: false,
-  fullWidth: false,
   describedByIds: [],
   labelType: 'label',
   hasChildLabel: true

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "style", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "style", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -21,6 +21,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Side Public License, v 1.
  */
 import React, { Component } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 import { keys } from '../../../services';
 import { isWithinRange } from '../../../services/number';
@@ -36,6 +37,7 @@ import { EuiRangeThumb } from './range_thumb';
 import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 import { calculateThumbPosition } from './utils';
+import { FormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDualRange = /*#__PURE__*/function (_Component) {
   _inherits(EuiDualRange, _Component);
@@ -437,11 +439,16 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
+      var _ref = this.context,
+          defaultFullWidth = _ref.defaultFullWidth;
+
       var _this$props2 = this.props,
           className = _this$props2.className,
+          customCss = _this$props2.css,
           compressed = _this$props2.compressed,
           disabled = _this$props2.disabled,
-          fullWidth = _this$props2.fullWidth,
+          _this$props2$fullWidt = _this$props2.fullWidth,
+          fullWidth = _this$props2$fullWidt === void 0 ? defaultFullWidth : _this$props2$fullWidt,
           isLoading = _this$props2.isLoading,
           readOnly = _this$props2.readOnly,
           propsId = _this$props2.id,
@@ -536,8 +543,14 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
       var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
+      var styles = {
+        euiDualRange: /*#__PURE__*/css(";label:euiDualRange;")
+      }; // TODO: Emotion conversion
+
+      var cssStyles = [styles.euiDualRange, customCss];
 
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
+        css: cssStyles,
         className: classes,
         fullWidth: fullWidth,
         compressed: compressed
@@ -659,11 +672,12 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
   return EuiDualRange;
 }(Component);
 
+_defineProperty(EuiDualRange, "contextType", FormContext);
+
 _defineProperty(EuiDualRange, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
-  fullWidth: false,
   compressed: false,
   isLoading: false,
   showLabels: false,

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

@@ -32,6 +32,7 @@ import { EuiRangeSlider } from './range_slider';
 import { EuiRangeTooltip } from './range_tooltip';
 import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
+import { FormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRange = /*#__PURE__*/function (_Component) {
   _inherits(EuiRange, _Component);
@@ -114,11 +115,15 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
+      var _ref = this.context,
+          defaultFullWidth = _ref.defaultFullWidth;
+
       var _this$props = this.props,
           className = _this$props.className,
           compressed = _this$props.compressed,
           disabled = _this$props.disabled,
-          fullWidth = _this$props.fullWidth,
+          _this$props$fullWidth = _this$props.fullWidth,
+          fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
           isLoading = _this$props.isLoading,
           readOnly = _this$props.readOnly,
           propsId = _this$props.id,
@@ -252,11 +257,12 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
   return EuiRange;
 }(Component);
 
+_defineProperty(EuiRange, "contextType", FormContext);
+
 _defineProperty(EuiRange, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
-  fullWidth: false,
   compressed: false,
   isLoading: false,
   showLabels: false,

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

@@ -11,13 +11,18 @@ var _excluded = ["children", "className", "fullWidth", "compressed"];
  */
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
+import { useFormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiRangeWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      fullWidth = _ref.fullWidth,
-      compressed = _ref.compressed,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var EuiRangeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useFormContext = useFormContext(),
+      defaultFullWidth = _useFormContext.defaultFullWidth;
+
+  var children = props.children,
+      className = props.className,
+      _props$fullWidth = props.fullWidth,
+      fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
+      compressed = props.compressed,
+      rest = _objectWithoutProperties(props, _excluded);
 
   var classes = classNames('euiRangeWrapper', {
     'euiRangeWrapper--fullWidth': fullWidth,

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

@@ -14,34 +14,38 @@ import React from 'react';
 import classNames from 'classnames';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
+import { useFormContext } from '../eui_form_context';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiSelect = function EuiSelect(_ref) {
-  var className = _ref.className,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      id = _ref.id,
-      name = _ref.name,
-      inputRef = _ref.inputRef,
-      isInvalid = _ref.isInvalid,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$hasNoInitialSele = _ref.hasNoInitialSelection,
-      hasNoInitialSelection = _ref$hasNoInitialSele === void 0 ? false : _ref$hasNoInitialSele,
-      defaultValue = _ref.defaultValue,
-      _ref$compressed = _ref.compressed,
-      compressed = _ref$compressed === void 0 ? false : _ref$compressed,
-      _value = _ref.value,
-      prepend = _ref.prepend,
-      append = _ref.append,
-      onMouseUp = _ref.onMouseUp,
-      disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var EuiSelect = function EuiSelect(props) {
+  var _useFormContext = useFormContext(),
+      defaultFullWidth = _useFormContext.defaultFullWidth;
 
-  // if this is injecting an empty option for `hasNoInitialSelection` then
+  var className = props.className,
+      _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      id = props.id,
+      name = props.name,
+      inputRef = props.inputRef,
+      isInvalid = props.isInvalid,
+      _props$fullWidth = props.fullWidth,
+      fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
+      _props$isLoading = props.isLoading,
+      isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+      _props$hasNoInitialSe = props.hasNoInitialSelection,
+      hasNoInitialSelection = _props$hasNoInitialSe === void 0 ? false : _props$hasNoInitialSe,
+      defaultValue = props.defaultValue,
+      _props$compressed = props.compressed,
+      compressed = _props$compressed === void 0 ? false : _props$compressed,
+      _value = props.value,
+      prepend = props.prepend,
+      append = props.append,
+      onMouseUp = props.onMouseUp,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, _excluded); // if this is injecting an empty option for `hasNoInitialSelection` then
   // value needs to fallback to an empty string to interact properly with `defaultValue`
+
+
   var value = hasNoInitialSelection ? _value !== null && _value !== void 0 ? _value : '' : _value;
 
   var handleMouseUp = function handleMouseUp(e) {

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

@@ -15,29 +15,33 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiI18n } from '../../i18n';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
+import { useFormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiSuperSelectControl = function EuiSuperSelectControl(_ref) {
-  var className = _ref.className,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      id = _ref.id,
-      name = _ref.name,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$isInvalid = _ref.isInvalid,
-      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
-      readOnly = _ref.readOnly,
-      defaultValue = _ref.defaultValue,
-      _ref$compressed = _ref.compressed,
-      compressed = _ref$compressed === void 0 ? false : _ref$compressed,
-      value = _ref.value,
-      prepend = _ref.prepend,
-      append = _ref.append,
-      screenReaderId = _ref.screenReaderId,
-      disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
+  var _useFormContext = useFormContext(),
+      defaultFullWidth = _useFormContext.defaultFullWidth;
+
+  var className = props.className,
+      _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      id = props.id,
+      name = props.name,
+      _props$fullWidth = props.fullWidth,
+      fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
+      _props$isLoading = props.isLoading,
+      isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      readOnly = props.readOnly,
+      defaultValue = props.defaultValue,
+      _props$compressed = props.compressed,
+      compressed = _props$compressed === void 0 ? false : _props$compressed,
+      value = props.value,
+      prepend = props.prepend,
+      append = props.append,
+      screenReaderId = props.screenReaderId,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, _excluded);
 
   var numIconsClass = getFormControlClassNameForIconCount({
     isInvalid: isInvalid,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "showLabel", "type", "labelProps"];
+var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "css", "showLabel", "type", "labelProps"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,6 +10,7 @@ var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange",
  * Side Public License, v 1.
  */
 import React, { useCallback } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 import { useGeneratedHtmlId } from '../../../services/accessibility';
 import { EuiIcon } from '../../icon';
@@ -22,6 +23,7 @@ export var EuiSwitch = function EuiSwitch(_ref) {
       compressed = _ref.compressed,
       onChange = _ref.onChange,
       className = _ref.className,
+      customCss = _ref.css,
       _ref$showLabel = _ref.showLabel,
       showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
       _ref$type = _ref.type,
@@ -53,7 +55,13 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     console.warn('EuiSwitch `label` must be a string when `showLabel` is false.');
   }
 
+  var styles = {
+    euiSwitch: /*#__PURE__*/css(";label:euiSwitch;")
+  }; // TODO: Emotion conversion
+
+  var cssStyles = [styles.euiSwitch, customCss];
   return ___EmotionJSX("div", {
+    css: cssStyles,
     className: classes
   }, ___EmotionJSX("button", _extends({
     id: switchId,

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

@@ -12,6 +12,7 @@ var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inpu
 import React from 'react';
 import classNames from 'classnames';
 import { EuiValidatableControl } from '../validatable_control';
+import { useFormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var resizeToClassNameMap = {
   vertical: 'euiTextArea--resizeVertical',
@@ -20,21 +21,24 @@ var resizeToClassNameMap = {
   none: 'euiTextArea--resizeNone'
 };
 export var RESIZE = Object.keys(resizeToClassNameMap);
-export var EuiTextArea = function EuiTextArea(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      compressed = _ref.compressed,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      id = _ref.id,
-      inputRef = _ref.inputRef,
-      isInvalid = _ref.isInvalid,
-      name = _ref.name,
-      placeholder = _ref.placeholder,
-      _ref$resize = _ref.resize,
-      resize = _ref$resize === void 0 ? 'vertical' : _ref$resize,
-      rows = _ref.rows,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var EuiTextArea = function EuiTextArea(props) {
+  var _useFormContext = useFormContext(),
+      defaultFullWidth = _useFormContext.defaultFullWidth;
+
+  var children = props.children,
+      className = props.className,
+      compressed = props.compressed,
+      _props$fullWidth = props.fullWidth,
+      fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
+      id = props.id,
+      inputRef = props.inputRef,
+      isInvalid = props.isInvalid,
+      name = props.name,
+      placeholder = props.placeholder,
+      _props$resize = props.resize,
+      resize = _props$resize === void 0 ? 'vertical' : _props$resize,
+      rows = props.rows,
+      rest = _objectWithoutProperties(props, _excluded);
 
   var classes = classNames('euiTextArea', resizeToClassNameMap[resize], {
     'euiTextArea--fullWidth': fullWidth,

package/optimize/es/components/icon/assets/beta.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconBeta = function EuiIconBeta(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M8 6.394h1.03c.72 0 1.283.153 1.688.459a2.2 2.2 0 01.813 1.163c.138.47.165.952.083 1.447-.1.597-.33 1.135-.69 1.616a3.95 3.95 0 01-1.333 1.137 3.689 3.689 0 01-1.735.418c-.381 0-.747-.07-1.097-.212-.35-.144-.636-.417-.86-.818l-.082.041.33-2.018c-.055.337-.024.647.092.932.12.285.32.513.598.685.281.171.634.257 1.06.257a2.54 2.54 0 002.075-1.03c.226-.308.369-.645.427-1.008a1.929 1.929 0 00-.072-.973 1.524 1.524 0 00-.536-.752c-.25-.196-.57-.293-.957-.293H7.825L8 6.395zm1.359-4.591c.49 0 .913.079 1.266.237a2.258 2.258 0 011.303 1.528c.082.33.094.668.036 1.014-.069.433-.25.864-.54 1.293-.29.425-.684.78-1.185 1.065-.497.282-1.096.422-1.796.422h-.597l.175-1.05h.576a2.182 2.182 0 001.812-.89c.192-.265.312-.544.36-.84.08-.473-.036-.866-.344-1.178-.31-.313-.726-.469-1.251-.469-.35 0-.683.072-.999.216a2.256 2.256 0 00-.793.603 1.852 1.852 0 00-.412.89l-1.78 10.81H3.973l1.782-10.81a3.17 3.17 0 01.648-1.457c.34-.429.765-.767 1.277-1.014a3.827 3.827 0 011.678-.37z"
+  }));
+};
+
+export var icon = EuiIconBeta;

package/optimize/es/components/icon/assets/filter.js

@@ -27,8 +27,7 @@ var EuiIconFilter = function EuiIconFilter(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
+    d: "M3 5.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm2 3a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM7.5 11a.5.5 0 000 1h1a.5.5 0 000-1h-1z"
   }));
 };
 

package/optimize/es/components/icon/assets/filterExclude.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconFilterExclude = function EuiIconFilterExclude(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M.5 1a.5.5 0 000 1h9a.5.5 0 000-1h-9z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M16 11.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm-8 0a.5.5 0 01.5-.5h6a.5.5 0 010 1h-6a.5.5 0 01-.5-.5z"
+  }), ___EmotionJSX("path", {
+    d: "M2 4.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7a.5.5 0 000 1h1a.5.5 0 000-1h-1z"
+  }));
+};
+
+export var icon = EuiIconFilterExclude;