@commercetools-uikit/select-utils 12.2.4 → 12.2.9

package/dist/commercetools-uikit-select-utils.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

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

@@ -15,15 +15,14 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-var PropTypes = require('prop-types');
 var react = require('@emotion/react');
 var icons = require('@commercetools-uikit/icons');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var omit = require('lodash/omit');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var reactSelect = require('react-select');
+var _pt = require('prop-types');
 var react$1 = require('react');
-var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
 
@@ -38,10 +37,9 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
-var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
 
@@ -53,7 +51,7 @@ var messages$1 = reactIntl.defineMessages({
   }
 });
 
-var _excluded$1 = ["ref"];
+var _excluded = ["ref"];
 
 function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
 
@@ -65,11 +63,11 @@ var ClearIndicator = function ClearIndicator(props) {
   var getStyles = props.getStyles,
       _props$innerProps = props.innerProps,
       ref = _props$innerProps.ref,
-      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded$1);
+      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
 
   return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
     ref: ref,
-    css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", designSystem.customProperties.colorWarning, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmMiLCJmaWxlIjoiY2xlYXItaW5kaWNhdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgQ2xvc2VJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCB7XG4gICAgZ2V0U3R5bGVzLFxuICAgIGlubmVyUHJvcHM6IHsgcmVmLCAuLi5yZXN0SW5uZXJQcm9wcyB9LFxuICB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgey4uLnJlc3RJbm5lclByb3BzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICBmaWxsOiAke3ZhcnMuY29sb3JXYXJuaW5nfTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAgIHN0eWxlPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIGNvbG9yPVwic29saWRcIiBzaXplPVwibWVkaXVtXCIgLz5cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn07XG5cbkNsZWFySW5kaWNhdG9yLmRpc3BsYXlOYW1lID0gJ0NsZWFySW5kaWNhdG9yJztcbkNsZWFySW5kaWNhdG9yLnByb3BUeXBlcyA9IHtcbiAgaW5uZXJQcm9wczogUHJvcFR5cGVzLm9iamVjdCxcbiAgZ2V0U3R5bGVzOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2xlYXJJbmRpY2F0b3I7XG4iXX0= */"),
+    css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", designSystem.customProperties.colorWarning, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbnR5cGUgVENsZWFySW5kaWNhdG9yID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yKSA9PiB7XG4gIGNvbnN0IGludGwgPSB1c2VJbnRsKCk7XG4gIGNvbnN0IHtcbiAgICBnZXRTdHlsZXMsXG4gICAgaW5uZXJQcm9wczogeyByZWYsIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICA6aG92ZXIgc3ZnICoge1xuICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvcldhcm5pbmd9O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgc3R5bGU9e2dldFN0eWxlcygnY2xlYXJJbmRpY2F0b3InLCBwcm9wcykgYXMgQ1NTUHJvcGVydGllc31cbiAgICAgIHRpdGxlPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICBhcmlhLWxhYmVsPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgPlxuICAgICAgPENsb3NlSWNvbiBjb2xvcj1cInNvbGlkXCIgc2l6ZT1cIm1lZGl1bVwiIC8+XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5DbGVhckluZGljYXRvci5kaXNwbGF5TmFtZSA9ICdDbGVhckluZGljYXRvcic7XG5cbmV4cG9ydCBkZWZhdWx0IENsZWFySW5kaWNhdG9yO1xuIl19 */"),
     style: getStyles('clearIndicator', props),
     title: intl.formatMessage(messages$1.clearButtonLabel),
     "aria-label": intl.formatMessage(messages$1.clearButtonLabel),
@@ -81,15 +79,12 @@ var ClearIndicator = function ClearIndicator(props) {
 };
 
 ClearIndicator.displayName = 'ClearIndicator';
-ClearIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
-  innerProps: PropTypes__default["default"].object,
-  getStyles: PropTypes__default["default"].func.isRequired
-} : {};
 var ClearIndicator$1 = ClearIndicator;
 
 function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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'];
 
 var TagRemove = function TagRemove(props) {
@@ -108,13 +103,6 @@ var TagRemove = function TagRemove(props) {
 };
 
 TagRemove.displayName = 'TagRemove';
-TagRemove.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectProps: PropTypes__default["default"].shape({
-    isDisabled: PropTypes__default["default"].bool.isRequired,
-    isReadOnly: PropTypes__default["default"].bool
-  }).isRequired,
-  innerProps: PropTypes__default["default"].object
-} : {};
 var TagRemove$1 = TagRemove;
 
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
@@ -131,9 +119,6 @@ var DropdownIndicator = function DropdownIndicator(props) {
 };
 
 DropdownIndicator.displayName = 'DropdownIndicator';
-DropdownIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
-  isDisabled: PropTypes__default["default"].bool
-} : {};
 var DropdownIndicator$1 = DropdownIndicator;
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
@@ -152,8 +137,6 @@ var SearchIconDropdownIndicator = function SearchIconDropdownIndicator(props) {
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
 var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
 
-var _excluded = ["children"];
-
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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; }
@@ -164,10 +147,7 @@ var getDefaultComponent = function getDefaultComponent(type) {
   return react$1.Fragment;
 };
 
-var WrapperWithIcon = function WrapperWithIcon(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+var WrapperWithIcon = function WrapperWithIcon(props) {
   var Component = getDefaultComponent(props.type);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
@@ -176,20 +156,19 @@ var WrapperWithIcon = function WrapperWithIcon(_ref) {
       // react-select uses absolute positioning for the SingleValue/Placeholder
       // the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
       // spacingsXs is the margin between the icon and value
-      css: /*#__PURE__*/react.css("margin-left:", designSystem.customProperties.spacingXl + designSystem.customProperties.spacingXs, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCZ0IiLCJmaWxlIjoid3JhcHBlci13aXRoLWljb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGcmFnbWVudCwgY2xvbmVFbGVtZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gKHR5cGUpID0+IHtcbiAgaWYgKHR5cGUgPT09ICdzaW5nbGVWYWx1ZScpIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5TaW5nbGVWYWx1ZTtcbiAgaWYgKHR5cGUgPT09ICdwbGFjZWhvbGRlcicpIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5QbGFjZWhvbGRlcjtcbiAgcmV0dXJuIEZyYWdtZW50O1xufTtcblxuY29uc3QgV3JhcHBlcldpdGhJY29uID0gKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0pID0+IHtcbiAgY29uc3QgQ29tcG9uZW50ID0gZ2V0RGVmYXVsdENvbXBvbmVudChwcm9wcy50eXBlKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogJ2JpZycsXG4gICAgICAgIH0pfVxuICAgICAgPHNwYW5cbiAgICAgICAgLy8gcmVhY3Qtc2VsZWN0IHVzZXMgYWJzb2x1dGUgcG9zaXRpb25pbmcgZm9yIHRoZSBTaW5nbGVWYWx1ZS9QbGFjZWhvbGRlclxuICAgICAgICAvLyB0aGUgaWNvbiBoYXMgYSBmaXhlZCBzaXplIG9mIDI0cHggKD09IFNwYWNpbmdzWGwpLCB0aGVyZWZvcmUgd2UgY2FuIHVzZSBhIGZpeGVkIG1hcmdpblxuICAgICAgICAvLyBzcGFjaW5nc1hzIGlzIHRoZSBtYXJnaW4gYmV0d2VlbiB0aGUgaWNvbiBhbmQgdmFsdWVcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6ICR7Y3VzdG9tUHJvcGVydGllcy5zcGFjaW5nWGwgK1xuICAgICAgICAgIGN1c3RvbVByb3BlcnRpZXMuc3BhY2luZ1hzfTtcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPENvbXBvbmVudCB7Li4ucHJvcHN9PntjaGlsZHJlbn08L0NvbXBvbmVudD5cbiAgICAgIDwvc3Bhbj5cbiAgICA8Lz5cbiAgKTtcbn07XG5XcmFwcGVyV2l0aEljb24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIHR5cGU6IFByb3BUeXBlcy5vbmVPZihbJ3NpbmdsZVZhbHVlJywgJ3BsYWNlaG9sZGVyJ10pLFxuICBzZWxlY3RQcm9wczogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBpY29uTGVmdDogUHJvcFR5cGVzLm5vZGUsXG4gIH0pLFxufTtcbldyYXBwZXJXaXRoSWNvbi5kaXNwbGF5TmFtZSA9ICdXcmFwcGVyV2l0aEljb24nO1xuXG5leHBvcnQgZGVmYXVsdCBXcmFwcGVyV2l0aEljb247XG5cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2Rpc3BsYXktbmFtZSAqL1xuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wcykgPT4gPFdyYXBwZXJXaXRoSWNvbiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+LFxuICBQbGFjZWhvbGRlcjogKHByb3BzKSA9PiA8V3JhcHBlcldpdGhJY29uIHsuLi5wcm9wc30gdHlwZT1cInBsYWNlaG9sZGVyXCIgLz4sXG59O1xuLyogZXNsaW50LWVuYWJsZSByZWFjdC9kaXNwbGF5LW5hbWUgKi9cblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
+      css: /*#__PURE__*/react.css("margin-left:", designSystem.customProperties.spacingXl + designSystem.customProperties.spacingXs, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ2dCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZyYWdtZW50LCBjbG9uZUVsZW1lbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7XG4gIGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMsXG4gIFNpbmdsZVZhbHVlUHJvcHMsXG4gIFBsYWNlaG9sZGVyUHJvcHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5cbmV4cG9ydCB0eXBlIFRXcmFwcGVyV2l0aEljb25Qcm9wcyA9IHtcbiAgdHlwZTogc3RyaW5nO1xuICBzZWxlY3RQcm9wczogVFNlbGVjdFByb3BzO1xufSAmIFNpbmdsZVZhbHVlUHJvcHMgJlxuICBQbGFjZWhvbGRlclByb3BzO1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gKHR5cGU6IFRXcmFwcGVyV2l0aEljb25Qcm9wc1sndHlwZSddKSA9PiB7XG4gIGlmICh0eXBlID09PSAnc2luZ2xlVmFsdWUnKSByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuU2luZ2xlVmFsdWU7XG4gIGlmICh0eXBlID09PSAncGxhY2Vob2xkZXInKSByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuUGxhY2Vob2xkZXI7XG4gIHJldHVybiBGcmFnbWVudDtcbn07XG5cbnR5cGUgVFNlbGVjdFByb3BzID0ge1xuICBpY29uTGVmdDogUmVhY3RFbGVtZW50O1xufTtcblxuY29uc3QgV3JhcHBlcldpdGhJY29uID0gKHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHMpID0+IHtcbiAgY29uc3QgQ29tcG9uZW50ID0gZ2V0RGVmYXVsdENvbXBvbmVudChwcm9wcy50eXBlKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogJ2JpZycsXG4gICAgICAgIH0pfVxuICAgICAgPHNwYW5cbiAgICAgICAgLy8gcmVhY3Qtc2VsZWN0IHVzZXMgYWJzb2x1dGUgcG9zaXRpb25pbmcgZm9yIHRoZSBTaW5nbGVWYWx1ZS9QbGFjZWhvbGRlclxuICAgICAgICAvLyB0aGUgaWNvbiBoYXMgYSBmaXhlZCBzaXplIG9mIDI0cHggKD09IFNwYWNpbmdzWGwpLCB0aGVyZWZvcmUgd2UgY2FuIHVzZSBhIGZpeGVkIG1hcmdpblxuICAgICAgICAvLyBzcGFjaW5nc1hzIGlzIHRoZSBtYXJnaW4gYmV0d2VlbiB0aGUgaWNvbiBhbmQgdmFsdWVcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6ICR7Y3VzdG9tUHJvcGVydGllcy5zcGFjaW5nWGwgK1xuICAgICAgICAgIGN1c3RvbVByb3BlcnRpZXMuc3BhY2luZ1hzfTtcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPENvbXBvbmVudCB7Li4ucHJvcHN9Pntwcm9wcy5jaGlsZHJlbn08L0NvbXBvbmVudD5cbiAgICAgIDwvc3Bhbj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbldyYXBwZXJXaXRoSWNvbi5kaXNwbGF5TmFtZSA9ICdXcmFwcGVyV2l0aEljb24nO1xuXG5leHBvcnQgZGVmYXVsdCBXcmFwcGVyV2l0aEljb247XG5cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2Rpc3BsYXktbmFtZSAqL1xuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzKSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wcykgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb24gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcbi8qIGVzbGludC1lbmFibGUgcmVhY3QvZGlzcGxheS1uYW1lICovXG5cbmV4cG9ydCB7IGN1c3RvbUNvbXBvbmVudHMgfTtcbiJdfQ== */"),
       children: jsxRuntime.jsx(Component, _objectSpread$2(_objectSpread$2({}, props), {}, {
-        children: children
+        children: props.children
       }))
     })]
   });
 };
 
 WrapperWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes__default["default"].node,
-  type: PropTypes__default["default"].oneOf(['singleValue', 'placeholder']),
-  selectProps: PropTypes__default["default"].shape({
-    iconLeft: PropTypes__default["default"].node
-  })
+  type: _pt__default["default"].string.isRequired,
+  selectProps: _pt__default["default"].shape({
+    iconLeft: _pt__default["default"].element.isRequired
+  }).isRequired
 } : {};
 WrapperWithIcon.displayName = 'WrapperWithIcon';
 var WrapperWithIcon$1 = WrapperWithIcon;
@@ -226,24 +205,16 @@ var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInput
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
         isBold: true,
-        children: data.label || noValueFallback
+        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", data.key || noValueFallback]
+        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["ID: ", data.id || noValueFallback]
+        children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
       })]
     })
   }));
 };
 MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
-MultiplePropertiesSelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
-  data: PropTypes__default["default"].shape({
-    label: PropTypes__default["default"].string,
-    key: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-  }),
-  noValueFallback: PropTypes__default["default"].string
-} : {};
 var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(props) {
   var data = props.data;
   var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -252,22 +223,17 @@ var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(p
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
         isBold: true,
-        children: data.label || noValueFallback
+        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", data.key || noValueFallback]
+        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
       })]
     })
   }));
 };
 DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
-DoublePropertySelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
-  data: PropTypes__default["default"].shape({
-    label: PropTypes__default["default"].string,
-    key: PropTypes__default["default"].string
-  }),
-  noValueFallback: PropTypes__default["default"].string
-} : {};
 var CustomSelectInputOption = function CustomSelectInputOption(props) {
+  var _props$optionInnerPro;
+
   var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
 
   switch (props.optionType) {
@@ -284,23 +250,12 @@ var CustomSelectInputOption = function CustomSelectInputOption(props) {
     default:
       return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         children: jsxRuntime.jsx(Text__default["default"].Detail, {
-          children: props.optionInnerProps.data.label || noValueFallback
+          children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
         })
       }));
   }
 };
 CustomSelectInputOption.displayName = 'CustomSelectInputOption';
-CustomSelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
-  optionType: PropTypes__default["default"].oneOf(_Object$values__default["default"](SELECT_DROPDOWN_OPTION_TYPES)),
-  noValueFallback: PropTypes__default["default"].string,
-  optionInnerProps: PropTypes__default["default"].shape({
-    data: PropTypes__default["default"].shape({
-      label: PropTypes__default["default"].string,
-      key: PropTypes__default["default"].string,
-      id: PropTypes__default["default"].string
-    })
-  }).isRequired
-} : {};
 
 var messages = reactIntl.defineMessages({
   createLabel: {
@@ -405,7 +360,7 @@ var menuStyles = function menuStyles(props, theme) {
   };
 };
 
-var indicatorSeparatorStyles = function indicatorSeparatorStyles(props, theme) {
+var indicatorSeparatorStyles = function indicatorSeparatorStyles(theme) {
   return function (base) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -441,7 +396,7 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
   };
 };
 
-var menuListStyles = function menuListStyles(props, theme) {
+var menuListStyles = function menuListStyles(theme) {
   return function (base) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -453,7 +408,7 @@ var menuListStyles = function menuListStyles(props, theme) {
   };
 };
 
-var optionStyles = function optionStyles(props, theme) {
+var optionStyles = function optionStyles(theme) {
   return function (base, state) {
     var _context2, _context3;
 
@@ -507,6 +462,10 @@ var valueContainerStyles = function valueContainerStyles(props, theme) {
       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 ? 'flex' : 'grid',
       fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
     });
   };
@@ -545,7 +504,7 @@ var groupStyles = function groupStyles(props, theme) {
   };
 };
 
-var groupHeadingStyles = function groupHeadingStyles(props, theme) {
+var groupHeadingStyles = function groupHeadingStyles(theme) {
   return function (base) {
     var _context4;
 
@@ -565,7 +524,7 @@ var groupHeadingStyles = function groupHeadingStyles(props, theme) {
   };
 };
 
-var containerStyles = function containerStyles(props, theme) {
+var containerStyles = function containerStyles(theme) {
   return function (base, state) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -597,7 +556,7 @@ var menuPortalStyles = function menuPortalStyles(props) {
   };
 };
 
-var multiValueStyles = function multiValueStyles(props, theme) {
+var multiValueStyles = function multiValueStyles(theme) {
   return function (base) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -666,27 +625,27 @@ function createSelectStyles(props, theme) {
   return {
     control: controlStyles(props, theme),
     menu: menuStyles(props, theme),
-    indicatorSeparator: indicatorSeparatorStyles(props, theme),
+    indicatorSeparator: indicatorSeparatorStyles(theme),
     dropdownIndicator: dropdownIndicatorStyles(props, theme),
-    clearIndicator: clearIndicatorStyles(props, theme),
-    menuList: menuListStyles(props, theme),
-    menuPortal: menuPortalStyles(props, theme),
-    multiValue: multiValueStyles(props, theme),
+    clearIndicator: clearIndicatorStyles(),
+    menuList: menuListStyles(theme),
+    menuPortal: menuPortalStyles(props),
+    multiValue: multiValueStyles(theme),
     multiValueLabel: multiValueLabelStyles(props, theme),
     multiValueRemove: multiValueRemoveStyles(props, theme),
-    indicatorsContainer: indicatorsContainerStyles(props, theme),
-    option: optionStyles(props, theme),
+    indicatorsContainer: indicatorsContainerStyles(),
+    option: optionStyles(theme),
     placeholder: placeholderStyles(props, theme),
     valueContainer: valueContainerStyles(props, theme),
     singleValue: singleValueStyles(props, theme),
     group: groupStyles(props, theme),
-    groupHeading: groupHeadingStyles(props, theme),
-    container: containerStyles(props, theme)
+    groupHeading: groupHeadingStyles(theme),
+    container: containerStyles(theme)
   };
 }
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.4';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.9";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -15,15 +15,14 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-require('prop-types');
 var react = require('@emotion/react');
 var icons = require('@commercetools-uikit/icons');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var omit = require('lodash/omit');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var reactSelect = require('react-select');
+require('prop-types');
 var react$1 = require('react');
-require('@babel/runtime-corejs3/core-js-stable/object/values');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
 
@@ -51,7 +50,7 @@ var messages$1 = reactIntl.defineMessages({
   }
 });
 
-var _excluded$1 = ["ref"];
+var _excluded = ["ref"];
 
 function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
 
@@ -63,7 +62,7 @@ var ClearIndicator = function ClearIndicator(props) {
   var getStyles = props.getStyles,
       _props$innerProps = props.innerProps,
       ref = _props$innerProps.ref,
-      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded$1);
+      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
 
   return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
     ref: ref,
@@ -79,12 +78,12 @@ var ClearIndicator = function ClearIndicator(props) {
 };
 
 ClearIndicator.displayName = 'ClearIndicator';
-ClearIndicator.propTypes = {};
 var ClearIndicator$1 = ClearIndicator;
 
 function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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'];
 
 var TagRemove = function TagRemove(props) {
@@ -103,7 +102,6 @@ var TagRemove = function TagRemove(props) {
 };
 
 TagRemove.displayName = 'TagRemove';
-TagRemove.propTypes = {};
 var TagRemove$1 = TagRemove;
 
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
@@ -120,7 +118,6 @@ var DropdownIndicator = function DropdownIndicator(props) {
 };
 
 DropdownIndicator.displayName = 'DropdownIndicator';
-DropdownIndicator.propTypes = {};
 var DropdownIndicator$1 = DropdownIndicator;
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
@@ -139,8 +136,6 @@ var SearchIconDropdownIndicator = function SearchIconDropdownIndicator(props) {
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
 var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
 
-var _excluded = ["children"];
-
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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; }
@@ -151,10 +146,7 @@ var getDefaultComponent = function getDefaultComponent(type) {
   return react$1.Fragment;
 };
 
-var WrapperWithIcon = function WrapperWithIcon(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+var WrapperWithIcon = function WrapperWithIcon(props) {
   var Component = getDefaultComponent(props.type);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
@@ -165,7 +157,7 @@ var WrapperWithIcon = function WrapperWithIcon(_ref) {
       // spacingsXs is the margin between the icon and value
       css: /*#__PURE__*/react.css("margin-left:", designSystem.customProperties.spacingXl + designSystem.customProperties.spacingXs, ";" + ("" ), "" ),
       children: jsxRuntime.jsx(Component, _objectSpread$2(_objectSpread$2({}, props), {}, {
-        children: children
+        children: props.children
       }))
     })]
   });
@@ -207,17 +199,16 @@ var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInput
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
         isBold: true,
-        children: data.label || noValueFallback
+        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", data.key || noValueFallback]
+        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["ID: ", data.id || noValueFallback]
+        children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
       })]
     })
   }));
 };
 MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
-MultiplePropertiesSelectInputOption.propTypes = {};
 var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(props) {
   var data = props.data;
   var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -226,16 +217,17 @@ var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(p
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
         isBold: true,
-        children: data.label || noValueFallback
+        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", data.key || noValueFallback]
+        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
       })]
     })
   }));
 };
 DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
-DoublePropertySelectInputOption.propTypes = {};
 var CustomSelectInputOption = function CustomSelectInputOption(props) {
+  var _props$optionInnerPro;
+
   var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
 
   switch (props.optionType) {
@@ -252,13 +244,12 @@ var CustomSelectInputOption = function CustomSelectInputOption(props) {
     default:
       return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         children: jsxRuntime.jsx(Text__default["default"].Detail, {
-          children: props.optionInnerProps.data.label || noValueFallback
+          children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
         })
       }));
   }
 };
 CustomSelectInputOption.displayName = 'CustomSelectInputOption';
-CustomSelectInputOption.propTypes = {};
 
 var messages = reactIntl.defineMessages({
   createLabel: {
@@ -363,7 +354,7 @@ var menuStyles = function menuStyles(props, theme) {
   };
 };
 
-var indicatorSeparatorStyles = function indicatorSeparatorStyles(props, theme) {
+var indicatorSeparatorStyles = function indicatorSeparatorStyles(theme) {
   return function (base) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -399,7 +390,7 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
   };
 };
 
-var menuListStyles = function menuListStyles(props, theme) {
+var menuListStyles = function menuListStyles(theme) {
   return function (base) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -411,7 +402,7 @@ var menuListStyles = function menuListStyles(props, theme) {
   };
 };
 
-var optionStyles = function optionStyles(props, theme) {
+var optionStyles = function optionStyles(theme) {
   return function (base, state) {
     var _context2, _context3;
 
@@ -465,6 +456,10 @@ var valueContainerStyles = function valueContainerStyles(props, theme) {
       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 ? 'flex' : 'grid',
       fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
     });
   };
@@ -503,7 +498,7 @@ var groupStyles = function groupStyles(props, theme) {
   };
 };
 
-var groupHeadingStyles = function groupHeadingStyles(props, theme) {
+var groupHeadingStyles = function groupHeadingStyles(theme) {
   return function (base) {
     var _context4;
 
@@ -523,7 +518,7 @@ var groupHeadingStyles = function groupHeadingStyles(props, theme) {
   };
 };
 
-var containerStyles = function containerStyles(props, theme) {
+var containerStyles = function containerStyles(theme) {
   return function (base, state) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -555,7 +550,7 @@ var menuPortalStyles = function menuPortalStyles(props) {
   };
 };
 
-var multiValueStyles = function multiValueStyles(props, theme) {
+var multiValueStyles = function multiValueStyles(theme) {
   return function (base) {
     var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
 
@@ -624,27 +619,27 @@ function createSelectStyles(props, theme) {
   return {
     control: controlStyles(props, theme),
     menu: menuStyles(props, theme),
-    indicatorSeparator: indicatorSeparatorStyles(props, theme),
+    indicatorSeparator: indicatorSeparatorStyles(theme),
     dropdownIndicator: dropdownIndicatorStyles(props, theme),
-    clearIndicator: clearIndicatorStyles(props, theme),
-    menuList: menuListStyles(props, theme),
-    menuPortal: menuPortalStyles(props, theme),
-    multiValue: multiValueStyles(props, theme),
+    clearIndicator: clearIndicatorStyles(),
+    menuList: menuListStyles(theme),
+    menuPortal: menuPortalStyles(props),
+    multiValue: multiValueStyles(theme),
     multiValueLabel: multiValueLabelStyles(props, theme),
     multiValueRemove: multiValueRemoveStyles(props, theme),
-    indicatorsContainer: indicatorsContainerStyles(props, theme),
-    option: optionStyles(props, theme),
+    indicatorsContainer: indicatorsContainerStyles(),
+    option: optionStyles(theme),
     placeholder: placeholderStyles(props, theme),
     valueContainer: valueContainerStyles(props, theme),
     singleValue: singleValueStyles(props, theme),
     group: groupStyles(props, theme),
-    groupHeading: groupHeadingStyles(props, theme),
-    container: containerStyles(props, theme)
+    groupHeading: groupHeadingStyles(theme),
+    container: containerStyles(theme)
   };
 }
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.4';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.9";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;