@commercetools-uikit/async-creatable-select-input 16.0.0 → 16.1.1

package/dist/commercetools-uikit-async-creatable-select-input.cjs.dev.js

@@ -21,7 +21,6 @@ var Constraints = require('@commercetools-uikit/constraints');
 var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
 var selectUtils = require('@commercetools-uikit/select-utils');
 var utils = require('@commercetools-uikit/utils');
-var designSystem = require('@commercetools-uikit/design-system');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -42,13 +41,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
 
 function ownKeys(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(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(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(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
   scale: "s"
 });
-
 LoadingIndicator.displayName = 'LoadingIndicator';
 const customizedComponents = {
   DropdownIndicator: selectUtils.DropdownIndicator,
@@ -63,23 +59,15 @@ const defaultProps = {
   isSearchable: true,
   menuPortalZIndex: 1
 };
-
 const AsyncCreatableSelectInput = props => {
   const intl = reactIntl.useIntl();
-
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
   const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
-
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
   }
-
   if (props.isMulti) {
     process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
   }
-
   selectUtils.warnIfMenuPortalPropsAreMissing({
     menuPortalZIndex: props.menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
@@ -110,10 +98,10 @@ const AsyncCreatableSelectInput = props => {
           isReadOnly: props.isReadOnly,
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
-          hasValue: !isEmpty__default["default"](props.value),
-          isNewTheme
+          hasValue: !isEmpty__default["default"](props.value)
         }),
-        filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
+        filterOption: props.filterOption
+        // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
         // instead.
         // This makes it easier to less confusing to use with <label />s.
@@ -143,11 +131,11 @@ const AsyncCreatableSelectInput = props => {
               id: props.id,
               name: (() => {
                 if (!props.name) return undefined;
-                if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
+                if (!props.isMulti) return props.name;
+                // We append the ".0" to make Formik set the touched
                 // state as an array instead of a boolean only.
                 // Otherwise the shapes would clash on submission, as
                 // Formik will create an array on submission anyways.
-
                 return "".concat(props.name, ".0");
               })()
             },
@@ -157,14 +145,11 @@ const AsyncCreatableSelectInput = props => {
         } : undefined,
         onChange: (value, info) => {
           var _props$onChange;
-
           // wrapping breaking changes made in react-select v3
           let newValue = value;
-
           if (props.isMulti && !newValue) {
             newValue = [];
           }
-
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
               id: props.id,
@@ -179,11 +164,13 @@ const AsyncCreatableSelectInput = props => {
         placeholder: placeholder,
         tabIndex: props.tabIndex,
         tabSelectsValue: props.tabSelectsValue,
-        value: props.value // Async react-select props
+        value: props.value
+        // Async react-select props
         ,
         defaultOptions: props.defaultOptions,
         loadOptions: props.loadOptions,
-        cacheOptions: props.cacheOptions // Creatable props
+        cacheOptions: props.cacheOptions
+        // Creatable props
         ,
         allowCreateWhileLoading: props.allowCreateWhileLoading,
         formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
@@ -192,14 +179,14 @@ const AsyncCreatableSelectInput = props => {
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
-        createOptionPosition: props.createOptionPosition // @ts-ignore
+        createOptionPosition: props.createOptionPosition
+        // @ts-ignore
         ,
         iconLeft: props.iconLeft
       })
     }))
   });
 };
-
 AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   hasError: _pt__default["default"].bool,
@@ -214,33 +201,34 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
 AsyncCreatableSelectInput.defaultProps = defaultProps;
+
 /**
  * Expose static helper methods.
  */
+
 // Formik will set the field to an array on submission, so we always have to
 // deal with an array. The touched state ends up being an empty array in case
 // values were removed only. So we have to treat any array we receive as
 // a signal of the field having been touched.
-
 AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
+
 /**
  * Expose react-select components for customization purposes.
  */
-// custom
-
 
+// custom
 AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
 AsyncCreatableSelectInput.Control = reactSelect.components.Control;
 AsyncCreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
-AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron; // custom
-
+AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
+// custom
 AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
 AsyncCreatableSelectInput.Group = reactSelect.components.Group;
 AsyncCreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
 AsyncCreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
 AsyncCreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
-AsyncCreatableSelectInput.Input = reactSelect.components.Input; // custom
-
+AsyncCreatableSelectInput.Input = reactSelect.components.Input;
+// custom
 AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
 AsyncCreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
 AsyncCreatableSelectInput.Menu = reactSelect.components.Menu;
@@ -248,8 +236,8 @@ AsyncCreatableSelectInput.MenuList = reactSelect.components.MenuList;
 AsyncCreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
 AsyncCreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
 AsyncCreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
-AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel; // custom
-
+AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
+// custom
 AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
 AsyncCreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
 AsyncCreatableSelectInput.Option = reactSelect.components.Option;
@@ -260,7 +248,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-async-creatable-select-input.cjs.prod.js

@@ -21,7 +21,6 @@ var Constraints = require('@commercetools-uikit/constraints');
 var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
 var selectUtils = require('@commercetools-uikit/select-utils');
 var utils = require('@commercetools-uikit/utils');
-var designSystem = require('@commercetools-uikit/design-system');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -40,13 +39,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
 
 function ownKeys(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(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(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(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const LoadingIndicator = () => jsxRuntime.jsx(LoadingSpinner__default["default"], {
   scale: "s"
 });
-
 LoadingIndicator.displayName = 'LoadingIndicator';
 const customizedComponents = {
   DropdownIndicator: selectUtils.DropdownIndicator,
@@ -61,19 +57,11 @@ const defaultProps = {
   isSearchable: true,
   menuPortalZIndex: 1
 };
-
 const AsyncCreatableSelectInput = props => {
   const intl = reactIntl.useIntl();
-
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
   const placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder);
-
   if (!props.isReadOnly) ;
-
   if (props.isMulti) ;
-
   selectUtils.warnIfMenuPortalPropsAreMissing({
     menuPortalZIndex: props.menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
@@ -104,10 +92,10 @@ const AsyncCreatableSelectInput = props => {
           isReadOnly: props.isReadOnly,
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
-          hasValue: !isEmpty__default["default"](props.value),
-          isNewTheme
+          hasValue: !isEmpty__default["default"](props.value)
         }),
-        filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
+        filterOption: props.filterOption
+        // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
         // instead.
         // This makes it easier to less confusing to use with <label />s.
@@ -137,11 +125,11 @@ const AsyncCreatableSelectInput = props => {
               id: props.id,
               name: (() => {
                 if (!props.name) return undefined;
-                if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
+                if (!props.isMulti) return props.name;
+                // We append the ".0" to make Formik set the touched
                 // state as an array instead of a boolean only.
                 // Otherwise the shapes would clash on submission, as
                 // Formik will create an array on submission anyways.
-
                 return "".concat(props.name, ".0");
               })()
             },
@@ -151,14 +139,11 @@ const AsyncCreatableSelectInput = props => {
         } : undefined,
         onChange: (value, info) => {
           var _props$onChange;
-
           // wrapping breaking changes made in react-select v3
           let newValue = value;
-
           if (props.isMulti && !newValue) {
             newValue = [];
           }
-
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
               id: props.id,
@@ -173,11 +158,13 @@ const AsyncCreatableSelectInput = props => {
         placeholder: placeholder,
         tabIndex: props.tabIndex,
         tabSelectsValue: props.tabSelectsValue,
-        value: props.value // Async react-select props
+        value: props.value
+        // Async react-select props
         ,
         defaultOptions: props.defaultOptions,
         loadOptions: props.loadOptions,
-        cacheOptions: props.cacheOptions // Creatable props
+        cacheOptions: props.cacheOptions
+        // Creatable props
         ,
         allowCreateWhileLoading: props.allowCreateWhileLoading,
         formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(selectUtils.messages.createLabel, {
@@ -186,44 +173,45 @@ const AsyncCreatableSelectInput = props => {
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
-        createOptionPosition: props.createOptionPosition // @ts-ignore
+        createOptionPosition: props.createOptionPosition
+        // @ts-ignore
         ,
         iconLeft: props.iconLeft
       })
     }))
   });
 };
-
 AsyncCreatableSelectInput.propTypes = {};
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
 AsyncCreatableSelectInput.defaultProps = defaultProps;
+
 /**
  * Expose static helper methods.
  */
+
 // Formik will set the field to an array on submission, so we always have to
 // deal with an array. The touched state ends up being an empty array in case
 // values were removed only. So we have to treat any array we receive as
 // a signal of the field having been touched.
-
 AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
+
 /**
  * Expose react-select components for customization purposes.
  */
-// custom
-
 
+// custom
 AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
 AsyncCreatableSelectInput.Control = reactSelect.components.Control;
 AsyncCreatableSelectInput.CrossIcon = reactSelect.components.CrossIcon;
-AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron; // custom
-
+AsyncCreatableSelectInput.DownChevron = reactSelect.components.DownChevron;
+// custom
 AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
 AsyncCreatableSelectInput.Group = reactSelect.components.Group;
 AsyncCreatableSelectInput.GroupHeading = reactSelect.components.GroupHeading;
 AsyncCreatableSelectInput.IndicatorSeparator = reactSelect.components.IndicatorSeparator;
 AsyncCreatableSelectInput.IndicatorsContainer = reactSelect.components.IndicatorsContainer;
-AsyncCreatableSelectInput.Input = reactSelect.components.Input; // custom
-
+AsyncCreatableSelectInput.Input = reactSelect.components.Input;
+// custom
 AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
 AsyncCreatableSelectInput.LoadingMessage = reactSelect.components.LoadingMessage;
 AsyncCreatableSelectInput.Menu = reactSelect.components.Menu;
@@ -231,8 +219,8 @@ AsyncCreatableSelectInput.MenuList = reactSelect.components.MenuList;
 AsyncCreatableSelectInput.MenuPortal = reactSelect.components.MenuPortal;
 AsyncCreatableSelectInput.MultiValue = reactSelect.components.MultiValue;
 AsyncCreatableSelectInput.MultiValueContainer = reactSelect.components.MultiValueContainer;
-AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel; // custom
-
+AsyncCreatableSelectInput.MultiValueLabel = reactSelect.components.MultiValueLabel;
+// custom
 AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
 AsyncCreatableSelectInput.NoOptionsMessage = reactSelect.components.NoOptionsMessage;
 AsyncCreatableSelectInput.Option = reactSelect.components.Option;
@@ -243,7 +231,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-async-creatable-select-input.esm.js

@@ -17,17 +17,13 @@ import Constraints from '@commercetools-uikit/constraints';
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
 import { messages, warnIfMenuPortalPropsAreMissing, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
 import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
-import { useTheme } from '@commercetools-uikit/design-system';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const LoadingIndicator = () => jsx(LoadingSpinner, {
   scale: "s"
 });
-
 LoadingIndicator.displayName = 'LoadingIndicator';
 const customizedComponents = {
   DropdownIndicator,
@@ -42,23 +38,15 @@ const defaultProps = {
   isSearchable: true,
   menuPortalZIndex: 1
 };
-
 const AsyncCreatableSelectInput = props => {
   const intl = useIntl();
-
-  const _useTheme = useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
   const placeholder = props.placeholder || intl.formatMessage(messages.placeholder);
-
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'AsyncCreatableSelectInput: `onChange` is required when input is not read only.') : void 0;
   }
-
   if (props.isMulti) {
     process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.value), 'AsyncCreatableSelectInput: `value` is expected to be an array when isMulti is true') : void 0;
   }
-
   warnIfMenuPortalPropsAreMissing({
     menuPortalZIndex: props.menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
@@ -89,10 +77,10 @@ const AsyncCreatableSelectInput = props => {
           isReadOnly: props.isReadOnly,
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
-          hasValue: !isEmpty(props.value),
-          isNewTheme
+          hasValue: !isEmpty(props.value)
         }),
-        filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
+        filterOption: props.filterOption
+        // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
         // instead.
         // This makes it easier to less confusing to use with <label />s.
@@ -122,11 +110,11 @@ const AsyncCreatableSelectInput = props => {
               id: props.id,
               name: (() => {
                 if (!props.name) return undefined;
-                if (!props.isMulti) return props.name; // We append the ".0" to make Formik set the touched
+                if (!props.isMulti) return props.name;
+                // We append the ".0" to make Formik set the touched
                 // state as an array instead of a boolean only.
                 // Otherwise the shapes would clash on submission, as
                 // Formik will create an array on submission anyways.
-
                 return "".concat(props.name, ".0");
               })()
             },
@@ -136,14 +124,11 @@ const AsyncCreatableSelectInput = props => {
         } : undefined,
         onChange: (value, info) => {
           var _props$onChange;
-
           // wrapping breaking changes made in react-select v3
           let newValue = value;
-
           if (props.isMulti && !newValue) {
             newValue = [];
           }
-
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
             target: {
               id: props.id,
@@ -158,11 +143,13 @@ const AsyncCreatableSelectInput = props => {
         placeholder: placeholder,
         tabIndex: props.tabIndex,
         tabSelectsValue: props.tabSelectsValue,
-        value: props.value // Async react-select props
+        value: props.value
+        // Async react-select props
         ,
         defaultOptions: props.defaultOptions,
         loadOptions: props.loadOptions,
-        cacheOptions: props.cacheOptions // Creatable props
+        cacheOptions: props.cacheOptions
+        // Creatable props
         ,
         allowCreateWhileLoading: props.allowCreateWhileLoading,
         formatCreateLabel: props.formatCreateLabel || (inputValue => intl.formatMessage(messages.createLabel, {
@@ -171,14 +158,14 @@ const AsyncCreatableSelectInput = props => {
         isValidNewOption: props.isValidNewOption,
         getNewOptionData: props.getNewOptionData,
         onCreateOption: props.onCreateOption,
-        createOptionPosition: props.createOptionPosition // @ts-ignore
+        createOptionPosition: props.createOptionPosition
+        // @ts-ignore
         ,
         iconLeft: props.iconLeft
       })
     }))
   });
 };
-
 AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   hasError: _pt.bool,
@@ -193,33 +180,34 @@ AsyncCreatableSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 AsyncCreatableSelectInput.displayName = 'AsyncCreatableSelectInput';
 AsyncCreatableSelectInput.defaultProps = defaultProps;
+
 /**
  * Expose static helper methods.
  */
+
 // Formik will set the field to an array on submission, so we always have to
 // deal with an array. The touched state ends up being an empty array in case
 // values were removed only. So we have to treat any array we receive as
 // a signal of the field having been touched.
-
 AsyncCreatableSelectInput.isTouched = touched => Boolean(touched);
+
 /**
  * Expose react-select components for customization purposes.
  */
-// custom
-
 
+// custom
 AsyncCreatableSelectInput.ClearIndicator = customizedComponents.ClearIndicator;
 AsyncCreatableSelectInput.Control = components.Control;
 AsyncCreatableSelectInput.CrossIcon = components.CrossIcon;
-AsyncCreatableSelectInput.DownChevron = components.DownChevron; // custom
-
+AsyncCreatableSelectInput.DownChevron = components.DownChevron;
+// custom
 AsyncCreatableSelectInput.DropdownIndicator = customizedComponents.DropdownIndicator;
 AsyncCreatableSelectInput.Group = components.Group;
 AsyncCreatableSelectInput.GroupHeading = components.GroupHeading;
 AsyncCreatableSelectInput.IndicatorSeparator = components.IndicatorSeparator;
 AsyncCreatableSelectInput.IndicatorsContainer = components.IndicatorsContainer;
-AsyncCreatableSelectInput.Input = components.Input; // custom
-
+AsyncCreatableSelectInput.Input = components.Input;
+// custom
 AsyncCreatableSelectInput.LoadingIndicator = customizedComponents.LoadingIndicator;
 AsyncCreatableSelectInput.LoadingMessage = components.LoadingMessage;
 AsyncCreatableSelectInput.Menu = components.Menu;
@@ -227,8 +215,8 @@ AsyncCreatableSelectInput.MenuList = components.MenuList;
 AsyncCreatableSelectInput.MenuPortal = components.MenuPortal;
 AsyncCreatableSelectInput.MultiValue = components.MultiValue;
 AsyncCreatableSelectInput.MultiValueContainer = components.MultiValueContainer;
-AsyncCreatableSelectInput.MultiValueLabel = components.MultiValueLabel; // custom
-
+AsyncCreatableSelectInput.MultiValueLabel = components.MultiValueLabel;
+// custom
 AsyncCreatableSelectInput.MultiValueRemove = customizedComponents.MultiValueRemove;
 AsyncCreatableSelectInput.NoOptionsMessage = components.NoOptionsMessage;
 AsyncCreatableSelectInput.Option = components.Option;
@@ -239,6 +227,6 @@ AsyncCreatableSelectInput.ValueContainer = components.ValueContainer;
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 export { AsyncCreatableSelectInput$1 as default, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-creatable-select-input",
   "description": "An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
-  "version": "16.0.0",
+  "version": "16.1.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,20 +21,20 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "16.0.0",
-    "@commercetools-uikit/design-system": "16.0.0",
-    "@commercetools-uikit/icons": "16.0.0",
-    "@commercetools-uikit/loading-spinner": "16.0.0",
-    "@commercetools-uikit/select-utils": "16.0.0",
-    "@commercetools-uikit/spacings": "16.0.0",
-    "@commercetools-uikit/text": "16.0.0",
-    "@commercetools-uikit/utils": "16.0.0",
-    "@emotion/is-prop-valid": "1.2.0",
+    "@commercetools-uikit/constraints": "16.1.1",
+    "@commercetools-uikit/design-system": "16.1.1",
+    "@commercetools-uikit/icons": "16.1.1",
+    "@commercetools-uikit/loading-spinner": "16.1.1",
+    "@commercetools-uikit/select-utils": "16.1.1",
+    "@commercetools-uikit/spacings": "16.1.1",
+    "@commercetools-uikit/text": "16.1.1",
+    "@commercetools-uikit/utils": "16.1.1",
+    "@emotion/is-prop-valid": "1.2.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.7.2"
+    "react-select": "5.7.3"
   },
   "devDependencies": {
     "react": "17.0.2",