@commercetools-uikit/select-utils 15.15.0 → 16.0.0

package/dist/commercetools-uikit-select-utils.cjs.prod.js

@@ -50,20 +50,20 @@ var messages$1 = reactIntl.defineMessages({
   }
 });
 
-var _excluded = ["ref", "onMouseDown"];
+const _excluded = ["ref", "onMouseDown"];
 
 function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var ClearIndicator = function ClearIndicator(props) {
-  var intl = reactIntl.useIntl();
+const ClearIndicator = props => {
+  const intl = reactIntl.useIntl();
 
-  var getStyles = props.getStyles,
-      _props$innerProps = props.innerProps,
-      ref = _props$innerProps.ref,
-      onMouseDown = _props$innerProps.onMouseDown,
-      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
+  const getStyles = props.getStyles,
+        _props$innerProps = props.innerProps,
+        ref = _props$innerProps.ref,
+        onMouseDown = _props$innerProps.onMouseDown,
+        restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
 
   return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
     ref: ref,
@@ -88,13 +88,13 @@ function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 // see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
-var removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
+const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
 
-var TagRemove = function TagRemove(props) {
-  var isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly); // when the select input is disabled,
+const TagRemove = props => {
+  const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly); // when the select input is disabled,
   // we don't want to spread the removeProp event handlers
 
-  var innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
+  const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
   return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$5(_objectSpread$5({
     label: "Remove"
   }, innerProps), {}, {
@@ -112,14 +112,12 @@ function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var DropdownIndicator = function DropdownIndicator(props) {
-  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    children: jsxRuntime.jsx(icons.CaretDownIcon, {
-      color: props.isDisabled ? 'neutral60' : undefined,
-      size: "small"
-    })
-  }));
-};
+const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  children: jsxRuntime.jsx(icons.CaretDownIcon, {
+    color: props.isDisabled ? 'neutral60' : undefined,
+    size: "small"
+  })
+}));
 
 DropdownIndicator.displayName = 'DropdownIndicator';
 var DropdownIndicator$1 = DropdownIndicator;
@@ -128,7 +126,7 @@ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var SearchIconDropdownIndicator = function SearchIconDropdownIndicator(props) {
+const SearchIconDropdownIndicator = props => {
   return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
     children: jsxRuntime.jsx(icons.SearchIcon, {
       color: 'neutral60',
@@ -144,14 +142,14 @@ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var getDefaultComponent = function getDefaultComponent(type) {
+const getDefaultComponent = type => {
   if (type === 'singleValue') return reactSelect.components.SingleValue;
   if (type === 'placeholder') return reactSelect.components.Placeholder;
   return null;
 };
 
-var WrapperWithIcon = function WrapperWithIcon(props) {
-  var DefaultComponent = getDefaultComponent(props.type);
+const WrapperWithIcon = props => {
+  const DefaultComponent = getDefaultComponent(props.type);
 
   if (!DefaultComponent) {
     return null;
@@ -172,21 +170,17 @@ var WrapperWithIcon = function WrapperWithIcon(props) {
 
 WrapperWithIcon.displayName = 'WrapperWithIcon';
 var WrapperWithIcon$1 = WrapperWithIcon;
-var customComponents = {
-  SingleValue: function SingleValue(props) {
-    return jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
-      type: "singleValue"
-    }));
-  },
-  Placeholder: function Placeholder(props) {
-    return jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
-      type: "placeholder"
-    }));
-  }
+const customComponents = {
+  SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+    type: "singleValue"
+  })),
+  Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+    type: "placeholder"
+  }))
 };
 
-var NO_VALUE_FALLBACK = '- - - -';
-var SELECT_DROPDOWN_OPTION_TYPES = {
+const NO_VALUE_FALLBACK = '- - - -';
+const SELECT_DROPDOWN_OPTION_TYPES = {
   SINGLE_PROPERTY: 'single-property',
   DOUBLE_PROPERTY: 'double-property',
   MULTIPLE_PROPERTIES: 'multiple-properties'
@@ -195,9 +189,9 @@ var SELECT_DROPDOWN_OPTION_TYPES = {
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInputOption(props) {
-  var data = props.data;
-  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+const MultiplePropertiesSelectInputOption = props => {
+  const data = props.data;
+  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
   return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
     children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
       scale: "xs",
@@ -213,9 +207,9 @@ var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInput
   }));
 };
 MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
-var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(props) {
-  var data = props.data;
-  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+const DoublePropertySelectInputOption = props => {
+  const data = props.data;
+  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
   return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
     children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
       scale: "xs",
@@ -229,10 +223,10 @@ var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(p
   }));
 };
 DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
-var CustomSelectInputOption = function CustomSelectInputOption(props) {
+const CustomSelectInputOption = props => {
   var _props$optionInnerPro;
 
-  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
 
   switch (props.optionType) {
     case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -287,7 +281,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var getControlBorderColor = function getControlBorderColor(props, defaultColor) {
+const getControlBorderColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
@@ -307,332 +301,290 @@ var getControlBorderColor = function getControlBorderColor(props, defaultColor)
   return defaultColor;
 };
 
-var controlStyles = function controlStyles(props) {
-  return function (base, state) {
-    var _context;
-
-    return _objectSpread(_objectSpread({}, base), {}, {
-      fontSize: designSystem.designTokens.fontSizeForInput,
-      backgroundColor: function () {
-        if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
-        if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
-        return designSystem.designTokens.backgroundColorForInput;
-      }(),
-      borderColor: function () {
-        if (props.isDisabled) return designSystem.designTokens.borderColorForInputWhenDisabled;
-        if (props.isReadOnly) return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
-        if (state.isFocused) return designSystem.designTokens.borderColorForInputWhenFocused;
-        if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
-        if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
-        return designSystem.designTokens.borderColorForInput;
-      }(),
-      borderWidth: function () {
-        if (props.hasWarning || props.hasError) return designSystem.designTokens.borderWidthForSelectInput;
-        return designSystem.designTokens.borderWidth1;
-      }(),
-      borderRadius: designSystem.designTokens.borderRadiusForInput,
-      minHeight: designSystem.designTokens.heightForInput,
-      cursor: function () {
-        if (props.isDisabled) return 'not-allowed';
-        if (props.isReadOnly) return 'default';
-        return 'pointer';
-      }(),
-      padding: "0 ".concat(designSystem.designTokens.paddingForInput),
-      transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
-      outline: 0,
-      boxShadow: 'none',
-      '&:focus-within': {
-        boxShadow: function () {
-          var _context2;
-
-          if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
-          return null;
-        }(),
-        borderColor: function () {
-          if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
-          return null;
-        }()
-      },
-      '&:hover': {
-        borderColor: getControlBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered),
-        backgroundColor: function () {
-          if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenHovered;
-          return null;
-        }()
-      },
-      pointerEvents: 'auto',
-      color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
-    });
-  };
+const controlStyles = props => (base, state) => {
+  var _context;
+
+  return _objectSpread(_objectSpread({}, base), {}, {
+    fontSize: designSystem.designTokens.fontSizeForInput,
+    backgroundColor: (() => {
+      if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
+      if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
+      return designSystem.designTokens.backgroundColorForInput;
+    })(),
+    borderColor: (() => {
+      if (props.isDisabled) return designSystem.designTokens.borderColorForInputWhenDisabled;
+      if (props.isReadOnly) return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
+      if (state.isFocused) return designSystem.designTokens.borderColorForInputWhenFocused;
+      if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
+      if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
+      return designSystem.designTokens.borderColorForInput;
+    })(),
+    borderWidth: (() => {
+      if (props.hasWarning || props.hasError) return designSystem.designTokens.borderWidthForSelectInput;
+      return designSystem.designTokens.borderWidth1;
+    })(),
+    borderRadius: designSystem.designTokens.borderRadiusForInput,
+    minHeight: designSystem.designTokens.heightForInput,
+    cursor: (() => {
+      if (props.isDisabled) return 'not-allowed';
+      if (props.isReadOnly) return 'default';
+      return 'pointer';
+    })(),
+    padding: "0 ".concat(designSystem.designTokens.paddingForInput),
+    transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
+    outline: 0,
+    boxShadow: 'none',
+    '&:focus-within': {
+      boxShadow: (() => {
+        var _context2;
+
+        if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
+        return null;
+      })(),
+      borderColor: (() => {
+        if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
+        return null;
+      })()
+    },
+    '&:hover': {
+      borderColor: getControlBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered),
+      backgroundColor: (() => {
+        if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenHovered;
+        return null;
+      })()
+    },
+    pointerEvents: 'auto',
+    color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
+  });
 };
 
-var menuStyles = function menuStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      border: "1px solid ".concat(designSystem.designTokens.borderColorForSelectInputMenu),
-      borderRadius: designSystem.designTokens.borderRadiusForInput,
-      backgroundColor: designSystem.designTokens.backgroundColorForInput,
-      boxShadow: designSystem.designTokens.shadowForSelectInputMenu,
-      fontSize: designSystem.designTokens.fontSizeForInput,
-      fontFamily: 'inherit',
-      margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
-      borderColor: function () {
-        if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
-        if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
-        return base.borderColorForInput;
-      }()
-    });
-  };
+const menuStyles = props => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    border: "1px solid ".concat(designSystem.designTokens.borderColorForSelectInputMenu),
+    borderRadius: designSystem.designTokens.borderRadiusForInput,
+    backgroundColor: designSystem.designTokens.backgroundColorForInput,
+    boxShadow: designSystem.designTokens.shadowForSelectInputMenu,
+    fontSize: designSystem.designTokens.fontSizeForInput,
+    fontFamily: 'inherit',
+    margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
+    borderColor: (() => {
+      if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
+      if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
+      return base.borderColorForInput;
+    })()
+  });
 };
 
-var indicatorSeparatorStyles = function indicatorSeparatorStyles() {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      display: 'none',
-      margin: '0',
-      padding: '0',
-      marginLeft: designSystem.designTokens.spacing10
-    });
-  };
+const indicatorSeparatorStyles = () => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    display: 'none',
+    margin: '0',
+    padding: '0',
+    marginLeft: designSystem.designTokens.spacing10
+  });
 };
 
-var dropdownIndicatorStyles = function dropdownIndicatorStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      color: designSystem.designTokens.fontColorForInput,
-      margin: '0',
-      padding: '0',
-      marginLeft: designSystem.designTokens.marginForSelectInputIcon,
-      fill: function () {
-        if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
-        if (props.hasError) return designSystem.designTokens.fontColorForSelectInputIconWhenError;
-        if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputIconWhenWarning;
-        return designSystem.designTokens.fontColorForSelectInputIcon;
-      }()
-    });
-  };
+const dropdownIndicatorStyles = props => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    color: designSystem.designTokens.fontColorForInput,
+    margin: '0',
+    padding: '0',
+    marginLeft: designSystem.designTokens.marginForSelectInputIcon,
+    fill: (() => {
+      if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
+      if (props.hasError) return designSystem.designTokens.fontColorForSelectInputIconWhenError;
+      if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputIconWhenWarning;
+      return designSystem.designTokens.fontColorForSelectInputIcon;
+    })()
+  });
 };
 
-var clearIndicatorStyles = function clearIndicatorStyles() {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      display: 'flex',
-      padding: 0,
-      marginLeft: designSystem.designTokens.marginForSelectInputIcon
-    });
-  };
-};
+const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
+  display: 'flex',
+  padding: 0,
+  marginLeft: designSystem.designTokens.marginForSelectInputIcon
+});
 
-var menuListStyles = function menuListStyles() {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      padding: designSystem.designTokens.paddingForSelectInputMenu,
-      borderRadius: designSystem.designTokens.borderRadiusForInput,
-      backgroundColor: designSystem.designTokens.backgroundColorForInput
-    });
-  };
+const menuListStyles = () => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    padding: designSystem.designTokens.paddingForSelectInputMenu,
+    borderRadius: designSystem.designTokens.borderRadiusForInput,
+    backgroundColor: designSystem.designTokens.backgroundColorForInput
+  });
 };
 
-var optionStyles = function optionStyles() {
-  return function (base, state) {
-    var _context3, _context4;
-
-    return _objectSpread(_objectSpread({}, base), {}, {
-      transition: _concatInstanceProperty__default["default"](_context3 = _concatInstanceProperty__default["default"](_context4 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n      background-color ")).call(_context4, designSystem.designTokens.transitionStandard, ",\n      color ")).call(_context3, designSystem.designTokens.transitionStandard),
-      paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
-      paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
-      paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
-      paddingBottom: designSystem.designTokens.paddingBottomForSelectInputOptions,
-      lineHeight: designSystem.designTokens.lineHeightForSelectInputOptions,
-      color: function () {
+const optionStyles = () => (base, state) => {
+  var _context3, _context4;
+
+  return _objectSpread(_objectSpread({}, base), {}, {
+    transition: _concatInstanceProperty__default["default"](_context3 = _concatInstanceProperty__default["default"](_context4 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n      background-color ")).call(_context4, designSystem.designTokens.transitionStandard, ",\n      color ")).call(_context3, designSystem.designTokens.transitionStandard),
+    paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
+    paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
+    paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
+    paddingBottom: designSystem.designTokens.paddingBottomForSelectInputOptions,
+    lineHeight: designSystem.designTokens.lineHeightForSelectInputOptions,
+    color: (() => {
+      if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
+      if (state.isSelected) return designSystem.designTokens.fontColorForInput;
+      return base.color;
+    })(),
+    backgroundColor: (() => {
+      if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
+      if (state.isFocused) return designSystem.designTokens.backgroundColorForSelectInputOptionWhenHovered;
+      return base.backgroundColor;
+    })(),
+    '&:active': {
+      color: (() => {
         if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
-        if (state.isSelected) return designSystem.designTokens.fontColorForInput;
         return base.color;
-      }(),
-      backgroundColor: function () {
-        if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
-        if (state.isFocused) return designSystem.designTokens.backgroundColorForSelectInputOptionWhenHovered;
-        return base.backgroundColor;
-      }(),
-      '&:active': {
-        color: function () {
-          if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
-          return base.color;
-        }(),
-        backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
-      }
-    });
-  };
-};
-
-var placeholderStyles = function placeholderStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      color: function () {
-        return designSystem.designTokens.placeholderFontColorForInput;
-      }(),
-      width: '100%',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
-    });
-  };
+      })(),
+      backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
+    }
+  });
 };
 
-var valueContainerStyles = function valueContainerStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      padding: '0',
-      backgroundColor: 'none',
-      overflow: 'hidden',
-      // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
-      // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
-      // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
-      fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
-    });
-  };
+const placeholderStyles = props => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    color: (() => {
+      return designSystem.designTokens.placeholderFontColorForInput;
+    })(),
+    width: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
+  });
 };
 
-var singleValueStyles = function singleValueStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      color: function () {
-        if (props.isDisabled) {
-          return designSystem.designTokens.fontColorForInputWhenDisabled;
-        }
-
-        if (props.isReadOnly) {
-          return designSystem.designTokens.fontColorForInputWhenReadonly;
-        }
-
-        if (props.hasError) return designSystem.designTokens.fontColorForSelectInputWhenError;
-        if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputWhenWarning;
-        return designSystem.designTokens.fontColorForInput;
-      }()
-    });
-  };
+const valueContainerStyles = props => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    padding: '0',
+    backgroundColor: 'none',
+    overflow: 'hidden',
+    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
+    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
+    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
+    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
+    fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
+  });
 };
 
-var groupStyles = function groupStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      padding: 0,
-      '&:not(:first-of-type)': {
-        borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.borderColorForGroupHeadingSelectInputOptions) : base.borderTop
+const singleValueStyles = props => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    color: (() => {
+      if (props.isDisabled) {
+        return designSystem.designTokens.fontColorForInputWhenDisabled;
       }
-    });
-  };
-};
 
-var groupHeadingStyles = function groupHeadingStyles() {
-  return function (base) {
-    var _context5;
-
-    return _objectSpread(_objectSpread({}, base), {}, {
-      color: designSystem.designTokens.fontColorForInputWhenReadonly,
-      fontSize: designSystem.designTokens.fontSizeSmall,
-      textTransform: 'none',
-      fontWeight: 'bold',
-      padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
-      '&:empty': {
-        padding: 0
+      if (props.isReadOnly) {
+        return designSystem.designTokens.fontColorForInputWhenReadonly;
       }
-    });
-  };
-};
 
-var containerStyles = function containerStyles() {
-  return function (base, state) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      fontFamily: 'inherit',
-      minHeight: designSystem.designTokens.sizeHeightInput,
-      borderRadius: designSystem.designTokens.borderRadiusForInput,
-      borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
-      boxShadow: state.isFocused ? 'none' : base.boxShadow
-    });
-  };
+      if (props.hasError) return designSystem.designTokens.fontColorForSelectInputWhenError;
+      if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputWhenWarning;
+      return designSystem.designTokens.fontColorForInput;
+    })()
+  });
 };
 
-var indicatorsContainerStyles = function indicatorsContainerStyles() {
-  return function () {
-    return {
-      background: 'none',
-      display: 'flex',
-      alignItems: 'center'
-    };
-  };
+const groupStyles = props => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    padding: 0,
+    '&:not(:first-of-type)': {
+      borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.borderColorForGroupHeadingSelectInputOptions) : base.borderTop
+    }
+  });
 };
 
-var menuPortalStyles = function menuPortalStyles(props) {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      zIndex: props.menuPortalZIndex
-    });
-  };
+const groupHeadingStyles = () => base => {
+  var _context5;
+
+  return _objectSpread(_objectSpread({}, base), {}, {
+    color: designSystem.designTokens.fontColorForInputWhenReadonly,
+    fontSize: designSystem.designTokens.fontSizeSmall,
+    textTransform: 'none',
+    fontWeight: 'bold',
+    padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
+    '&:empty': {
+      padding: 0
+    }
+  });
 };
 
-var multiValueStyles = function multiValueStyles() {
-  return function (base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      display: 'flex',
-      alignItems: designSystem.designTokens.alignItemsForSelectInputTag,
-      height: designSystem.designTokens.heightForSelectInputTag,
-      backgroundColor: designSystem.designTokens.backgroundColorForTag,
-      padding: '0',
-      border: designSystem.designTokens.borderForSelectInputTag
-    });
-  };
+const containerStyles = () => (base, state) => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    fontFamily: 'inherit',
+    minHeight: designSystem.designTokens.sizeHeightInput,
+    borderRadius: designSystem.designTokens.borderRadiusForInput,
+    borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
+    boxShadow: state.isFocused ? 'none' : base.boxShadow
+  });
 };
 
-var multiValueLabelStyles = function multiValueLabelStyles(props) {
-  return function (base) {
-    var _context6, _context7;
+const indicatorsContainerStyles = () => () => ({
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center'
+});
 
-    return _objectSpread(_objectSpread({}, base), {}, {
-      fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
-      color: function () {
-        if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
-        if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
-        return base.color;
-      }(),
-      padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
-      borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
-      border: props.isNewTheme ? 'none' : "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
-      borderWidth: '1px 0 1px 1px',
-      '&:last-child': {
-        borderRadius: designSystem.designTokens.borderRadiusForTag,
-        borderWidth: designSystem.designTokens.borderWidth1
-      }
-    });
-  };
+const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
+  zIndex: props.menuPortalZIndex
+});
+
+const multiValueStyles = () => base => {
+  return _objectSpread(_objectSpread({}, base), {}, {
+    display: 'flex',
+    alignItems: designSystem.designTokens.alignItemsForSelectInputTag,
+    height: designSystem.designTokens.heightForSelectInputTag,
+    backgroundColor: designSystem.designTokens.backgroundColorForTag,
+    padding: '0',
+    border: designSystem.designTokens.borderForSelectInputTag
+  });
+};
+
+const multiValueLabelStyles = props => base => {
+  var _context6, _context7;
+
+  return _objectSpread(_objectSpread({}, base), {}, {
+    fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
+    color: (() => {
+      if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
+      if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
+      return base.color;
+    })(),
+    padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
+    borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
+    border: props.isNewTheme ? 'none' : "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
+    borderWidth: '1px 0 1px 1px',
+    '&:last-child': {
+      borderRadius: designSystem.designTokens.borderRadiusForTag,
+      borderWidth: designSystem.designTokens.borderWidth1
+    }
+  });
 };
 
-var multiValueRemoveStyles = function multiValueRemoveStyles(props) {
-  return function (base, state) {
-    var _context8;
-
-    return _objectSpread(_objectSpread({}, base), {}, {
-      borderColor: designSystem.designTokens.borderColorForTag,
-      padding: "0 ".concat(designSystem.designTokens.spacing10),
-      borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
-      borderStyle: !props.isNewTheme ? 'solid' : 'none',
-      borderWidth: !props.isNewTheme ? designSystem.designTokens.borderWidth1 : '0',
-      pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
+const multiValueRemoveStyles = props => (base, state) => {
+  var _context8;
+
+  return _objectSpread(_objectSpread({}, base), {}, {
+    borderColor: designSystem.designTokens.borderColorForTag,
+    padding: "0 ".concat(designSystem.designTokens.spacing10),
+    borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
+    borderStyle: !props.isNewTheme ? 'solid' : 'none',
+    borderWidth: !props.isNewTheme ? designSystem.designTokens.borderWidth1 : '0',
+    pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
+    backgroundColor: designSystem.designTokens.backgroundColorForTag,
+    'svg *': {
+      fill: props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : ''
+    },
+    '&:hover, &:focus': {
+      borderColor: designSystem.designTokens.borderColorForTagWarning,
       backgroundColor: designSystem.designTokens.backgroundColorForTag,
       'svg *': {
-        fill: props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : ''
-      },
-      '&:hover, &:focus': {
-        borderColor: designSystem.designTokens.borderColorForTagWarning,
-        backgroundColor: designSystem.designTokens.backgroundColorForTag,
-        'svg *': {
-          fill: designSystem.designTokens.fontColorForClearInputIconWhenHovered
-        }
+        fill: designSystem.designTokens.fontColorForClearInputIconWhenHovered
       }
-    });
-  };
+    }
+  });
 };
 
 function createSelectStyles(props) {
@@ -658,13 +610,13 @@ function createSelectStyles(props) {
   };
 }
 
-var warnIfMenuPortalPropsAreMissing = function warnIfMenuPortalPropsAreMissing(props) {
+const warnIfMenuPortalPropsAreMissing = props => {
   if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
   ) ;
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "16.0.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;