@commercetools-uikit/select-utils 12.2.1 → 12.2.5

package/dist/commercetools-uikit-select-utils.esm.js

@@ -10,20 +10,20 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { customProperties, designTokens } from '@commercetools-uikit/design-system';
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
-import React from 'react';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/react';
+import { css } from '@emotion/react';
 import { CloseIcon, CloseBoldIcon, CaretDownIcon, SearchIcon } from '@commercetools-uikit/icons';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import omit from 'lodash/omit';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import { components } from 'react-select';
+import { cloneElement, Fragment as Fragment$1 } from 'react';
 import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
 
-var messages = defineMessages({
+var messages$1 = defineMessages({
   clearButtonLabel: {
     id: 'UIKit.ClearButton.clearButtonLabel',
     description: 'Label for the clear button',
@@ -31,7 +31,11 @@ var messages = defineMessages({
   }
 });
 
-var _excluded = ["ref"];
+var _excluded$1 = ["ref"];
+
+function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$6(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var ClearIndicator = function ClearIndicator(props) {
   var intl = useIntl();
@@ -39,17 +43,18 @@ var ClearIndicator = function ClearIndicator(props) {
   var getStyles = props.getStyles,
       _props$innerProps = props.innerProps,
       ref = _props$innerProps.ref,
-      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
+      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded$1);
 
-  return jsx("button", _extends({}, restInnerProps, {
+  return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
     ref: ref,
-    css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", customProperties.colorWarning, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;")),
+    css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", customProperties.colorWarning, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmMiLCJmaWxlIjoiY2xlYXItaW5kaWNhdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgQ2xvc2VJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCB7XG4gICAgZ2V0U3R5bGVzLFxuICAgIGlubmVyUHJvcHM6IHsgcmVmLCAuLi5yZXN0SW5uZXJQcm9wcyB9LFxuICB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgey4uLnJlc3RJbm5lclByb3BzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICBmaWxsOiAke3ZhcnMuY29sb3JXYXJuaW5nfTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAgIHN0eWxlPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIGNvbG9yPVwic29saWRcIiBzaXplPVwibWVkaXVtXCIgLz5cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn07XG5cbkNsZWFySW5kaWNhdG9yLmRpc3BsYXlOYW1lID0gJ0NsZWFySW5kaWNhdG9yJztcbkNsZWFySW5kaWNhdG9yLnByb3BUeXBlcyA9IHtcbiAgaW5uZXJQcm9wczogUHJvcFR5cGVzLm9iamVjdCxcbiAgZ2V0U3R5bGVzOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2xlYXJJbmRpY2F0b3I7XG4iXX0= */"),
     style: getStyles('clearIndicator', props),
-    title: intl.formatMessage(messages.clearButtonLabel),
-    "aria-label": intl.formatMessage(messages.clearButtonLabel)
-  }), jsx(CloseIcon, {
-    color: "solid",
-    size: "medium"
+    title: intl.formatMessage(messages$1.clearButtonLabel),
+    "aria-label": intl.formatMessage(messages$1.clearButtonLabel),
+    children: jsx(CloseIcon, {
+      color: "solid",
+      size: "medium"
+    })
   }));
 };
 
@@ -58,7 +63,11 @@ ClearIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
   innerProps: PropTypes.object,
   getStyles: PropTypes.func.isRequired
 } : {};
+var ClearIndicator$1 = ClearIndicator;
+
+function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$5(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
 
 var TagRemove = function TagRemove(props) {
@@ -66,11 +75,13 @@ var TagRemove = function TagRemove(props) {
   // we don't want to spread the removeProp event handlers
 
   var innerProps = isDisabled ? omit(props.innerProps, removeProps) : props.innerProps;
-  return jsx(AccessibleButton, _extends({
+  return jsx(AccessibleButton, _objectSpread$5(_objectSpread$5({
     label: "Remove"
-  }, innerProps), jsx(CloseBoldIcon, {
-    color: isDisabled ? 'neutral60' : 'solid',
-    size: "medium"
+  }, innerProps), {}, {
+    children: jsx(CloseBoldIcon, {
+      color: isDisabled ? 'neutral60' : 'solid',
+      size: "medium"
+    })
   }));
 };
 
@@ -82,11 +93,18 @@ TagRemove.propTypes = process.env.NODE_ENV !== "production" ? {
   }).isRequired,
   innerProps: PropTypes.object
 } : {};
+var TagRemove$1 = TagRemove;
+
+function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$4(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var DropdownIndicator = function DropdownIndicator(props) {
-  return jsx(components.DropdownIndicator, props, jsx(CaretDownIcon, {
-    color: props.isDisabled ? 'neutral60' : undefined,
-    size: "small"
+  return jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    children: jsx(CaretDownIcon, {
+      color: props.isDisabled ? 'neutral60' : undefined,
+      size: "small"
+    })
   }));
 };
 
@@ -94,37 +112,54 @@ DropdownIndicator.displayName = 'DropdownIndicator';
 DropdownIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
   isDisabled: PropTypes.bool
 } : {};
+var DropdownIndicator$1 = DropdownIndicator;
+
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var SearchIconDropdownIndicator = function SearchIconDropdownIndicator(props) {
-  return jsx(components.DropdownIndicator, props, jsx(SearchIcon, {
-    color: 'neutral60',
-    size: "big"
+  return jsx(components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
+    children: jsx(SearchIcon, {
+      color: 'neutral60',
+      size: "big"
+    })
   }));
 };
 
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
+var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
+
+var _excluded = ["children"];
+
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-var _excluded$1 = ["children"];
+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(_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var getDefaultComponent = function getDefaultComponent(type) {
   if (type === 'singleValue') return components.SingleValue;
   if (type === 'placeholder') return components.Placeholder;
-  return React.Fragment;
+  return Fragment$1;
 };
 
 var WrapperWithIcon = function WrapperWithIcon(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var Component = getDefaultComponent(props.type);
-  return jsx(React.Fragment, null, props.selectProps.iconLeft && /*#__PURE__*/React.cloneElement(props.selectProps.iconLeft, {
-    size: 'big'
-  }), jsx("span", {
-    // 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__*/css("margin-left:", customProperties.spacingXl + customProperties.spacingXs, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"))
-  }, jsx(Component, props, children)));
+  return jsxs(Fragment, {
+    children: [props.selectProps.iconLeft && /*#__PURE__*/cloneElement(props.selectProps.iconLeft, {
+      size: 'big'
+    }), jsx("span", {
+      // 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__*/css("margin-left:", customProperties.spacingXl + 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 */"),
+      children: jsx(Component, _objectSpread$2(_objectSpread$2({}, props), {}, {
+        children: children
+      }))
+    })]
+  });
 };
 
 WrapperWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -135,16 +170,17 @@ WrapperWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   })
 } : {};
 WrapperWithIcon.displayName = 'WrapperWithIcon';
+var WrapperWithIcon$1 = WrapperWithIcon;
 /* eslint-disable react/display-name */
 
 var customComponents = {
   SingleValue: function SingleValue(props) {
-    return jsx(WrapperWithIcon, _extends({}, props, {
+    return jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
       type: "singleValue"
     }));
   },
   Placeholder: function Placeholder(props) {
-    return jsx(WrapperWithIcon, _extends({}, props, {
+    return jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
       type: "placeholder"
     }));
   }
@@ -157,14 +193,25 @@ var SELECT_DROPDOWN_OPTION_TYPES = {
   MULTIPLE_PROPERTIES: 'multiple-properties'
 };
 
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInputOption(props) {
   var data = props.data;
   var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsx(components.Option, props, jsx(Spacings.Stack, {
-    scale: "xs"
-  }, jsx(Text.Detail, {
-    isBold: true
-  }, data.label || noValueFallback), jsx(Text.Detail, null, "Key: ", data.key || noValueFallback), jsx(Text.Detail, null, "ID: ", data.id || noValueFallback)));
+  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxs(Spacings.Stack, {
+      scale: "xs",
+      children: [jsx(Text.Detail, {
+        isBold: true,
+        children: data.label || noValueFallback
+      }), jsxs(Text.Detail, {
+        children: ["Key: ", data.key || noValueFallback]
+      }), jsxs(Text.Detail, {
+        children: ["ID: ", data.id || noValueFallback]
+      })]
+    })
+  }));
 };
 MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
 MultiplePropertiesSelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -178,11 +225,17 @@ MultiplePropertiesSelectInputOption.propTypes = process.env.NODE_ENV !== "produc
 var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(props) {
   var data = props.data;
   var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsx(components.Option, props, jsx(Spacings.Stack, {
-    scale: "xs"
-  }, jsx(Text.Detail, {
-    isBold: true
-  }, data.label || noValueFallback), jsx(Text.Detail, null, "Key: ", data.key || noValueFallback)));
+  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxs(Spacings.Stack, {
+      scale: "xs",
+      children: [jsx(Text.Detail, {
+        isBold: true,
+        children: data.label || noValueFallback
+      }), jsxs(Text.Detail, {
+        children: ["Key: ", data.key || noValueFallback]
+      })]
+    })
+  }));
 };
 DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
 DoublePropertySelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -197,17 +250,21 @@ var CustomSelectInputOption = function CustomSelectInputOption(props) {
 
   switch (props.optionType) {
     case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
-      return jsx(MultiplePropertiesSelectInputOption, _extends({}, props.optionInnerProps, {
+      return jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
 
     case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
-      return jsx(DoublePropertySelectInputOption, _extends({}, props.optionInnerProps, {
+      return jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
 
     default:
-      return jsx(components.Option, props.optionInnerProps, jsx(Text.Detail, null, props.optionInnerProps.data.label || noValueFallback));
+      return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        children: jsx(Text.Detail, {
+          children: props.optionInnerProps.data.label || noValueFallback
+        })
+      }));
   }
 };
 CustomSelectInputOption.displayName = 'CustomSelectInputOption';
@@ -223,7 +280,7 @@ CustomSelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
   }).isRequired
 } : {};
 
-var messages$1 = defineMessages({
+var messages = defineMessages({
   createLabel: {
     id: 'UIKit.CreatableSelectInput.createLabel',
     description: 'Text of dropdown when creating option',
@@ -251,7 +308,7 @@ var messages$1 = defineMessages({
   }
 });
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, 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) { var _context8; _forEachInstanceProperty(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context9; _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -589,13 +646,13 @@ function createSelectStyles(props, theme) {
     menu: menuStyles(props, theme),
     indicatorSeparator: indicatorSeparatorStyles(props, theme),
     dropdownIndicator: dropdownIndicatorStyles(props, theme),
-    clearIndicator: clearIndicatorStyles(),
+    clearIndicator: clearIndicatorStyles(props, theme),
     menuList: menuListStyles(props, theme),
-    menuPortal: menuPortalStyles(props),
+    menuPortal: menuPortalStyles(props, theme),
     multiValue: multiValueStyles(props, theme),
     multiValueLabel: multiValueLabelStyles(props, theme),
     multiValueRemove: multiValueRemoveStyles(props, theme),
-    indicatorsContainer: indicatorsContainerStyles(),
+    indicatorsContainer: indicatorsContainerStyles(props, theme),
     option: optionStyles(props, theme),
     placeholder: placeholderStyles(props, theme),
     valueContainer: valueContainerStyles(props, theme),
@@ -606,7 +663,7 @@ function createSelectStyles(props, theme) {
   };
 }
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.1';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
-export { ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator, TagRemove, WrapperWithIcon as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages$1 as messages, version };
+export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "12.2.1",
+  "version": "12.2.5",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,28 +9,31 @@
     "directory": "packages/components/inputs/select-utils"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "design system", "react", "uikit"],
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
   "license": "MIT",
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "main": "dist/commercetools-uikit-select-utils.cjs.js",
   "module": "dist/commercetools-uikit-select-utils.esm.js",
-  "files": ["dist"],
-  "scripts": {
-    "prepare": "../../../../scripts/version.js replace"
-  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "@babel/runtime": "7.14.6",
-    "@babel/runtime-corejs3": "7.14.7",
-    "@commercetools-uikit/accessible-button": "12.2.0",
-    "@commercetools-uikit/design-system": "12.1.0",
-    "@commercetools-uikit/icons": "12.2.1",
-    "@commercetools-uikit/spacings": "12.2.0",
-    "@commercetools-uikit/text": "12.2.0",
-    "@commercetools-uikit/utils": "12.2.0",
+    "@babel/runtime": "7.16.3",
+    "@babel/runtime-corejs3": "7.16.3",
+    "@commercetools-uikit/accessible-button": "12.2.5",
+    "@commercetools-uikit/design-system": "12.2.5",
+    "@commercetools-uikit/icons": "12.2.5",
+    "@commercetools-uikit/spacings": "12.2.5",
+    "@commercetools-uikit/text": "12.2.5",
+    "@commercetools-uikit/utils": "12.2.5",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",
@@ -39,7 +42,7 @@
   },
   "devDependencies": {
     "react": "17.0.2",
-    "react-intl": "5.20.4"
+    "react-intl": "5.21.2"
   },
   "peerDependencies": {
     "react": "17.x",