@commercetools-uikit/search-select-input 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# SearchSelectInput
+
+## Description
+
+A search select input component built on top of \`@commercetools-uikit/async-select-input\` to asynchronously load results (options) using the keyword that the user has entered.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/search-select-input
+```
+
+```
+npm --save install @commercetools-uikit/search-select-input
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-dom react-intl
+```
+
+```
+npm --save install react react-dom react-intl
+```
+
+## Usage
+
+```jsx
+import SearchSelectInput from '@commercetools-uikit/search-select-input';
+
+const Example = () => {
+  return (
+    <SearchSelectInput
+      id="customers"
+      name="customers"
+      horizontalConstraint={7}
+      optionType="single-lined"
+      isAutofocussed={false}
+      backspaceRemovesValue={true}
+      isClearable={true}
+      isDisabled={false}
+      isReadOnly={false}
+      isMulti={true}
+      noOptionsMessage="No exact match found"
+      loadingMessage="loading exact matches"
+      placeholder="Select customers"
+      // eslint-disable-next-line no-undef
+      loadOptions={customLoadOptionsFunction}
+      cacheOptions={false}
+    />
+  );
+};
+
+export default Example;
+```
+
+## Properties
+
+| Props                             | Type                                                                                               | Required | Default | Description                                                                                                                                                                                                                                                                                                                |
+| --------------------------------- | -------------------------------------------------------------------------------------------------- | :------: | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `horizontalConstraint`            | `enum`<br/>Possible values:<br/>`3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          |         | Horizontal size limit of the input fields.                                                                                                                                                                                                                                                                                 |
+| `aria-label`                      | `string`                                                                                           |          |         | Aria label (for assistive tech)                                                                                                                                                                                                                                                                                            |
+| `aria-labelledby`                 | `string`                                                                                           |          |         | HTML ID of an element that should be used as the label (for assistive tech)                                                                                                                                                                                                                                                |
+| `id`                              | `string`                                                                                           |          |         | The id of the search input. This forwarded as react-select's "inputId"                                                                                                                                                                                                                                                     |
+| `containerId`                     | `string`                                                                                           |          |         | The id to set on the SelectContainer component. This is forwarded as react-select's "id"                                                                                                                                                                                                                                   |
+| `name`                            | `string`                                                                                           |          |         | Name of the HTML Input (optional - without this, no input will be rendered)                                                                                                                                                                                                                                                |
+| `placeholder`                     | `string`                                                                                           |          |         | Placeholder text for the select value                                                                                                                                                                                                                                                                                      |
+| `components`                      | `objectOf(func)`                                                                                   |          |         | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)                                                                                                                                                                                               |
+| `tabIndex`                        | `string`                                                                                           |          |         | Sets the tabIndex attribute on the input                                                                                                                                                                                                                                                                                   |
+| `value`                           | `custom`                                                                                           |          | `null`  | The value of the select; reflected by the selected option                                                                                                                                                                                                                                                                  |
+| `backspaceRemovesValue`           | `bool`                                                                                             |          |         | Remove the currently focused option when the user presses backspace                                                                                                                                                                                                                                                        |
+| `hasError`                        | `bool`                                                                                             |          |         | Indicates the input field has an error                                                                                                                                                                                                                                                                                     |
+| `hasWarning`                      | `bool`                                                                                             |          |         | Indicates the input field has a warning                                                                                                                                                                                                                                                                                    |
+| `isReadOnly`                      | `bool`                                                                                             |          |         | Is the select read-only                                                                                                                                                                                                                                                                                                    |
+| `isDisabled`                      | `bool`                                                                                             |          |         | Is the select disabled                                                                                                                                                                                                                                                                                                     |
+| `isClearable`                     | `bool`                                                                                             |          |         | Is the select value clearable                                                                                                                                                                                                                                                                                              |
+| `isOptionDisabled`                | `func`                                                                                             |          |         | Override the built-in logic to detect whether an option is disabled                                                                                                                                                                                                                                                        |
+| `isMulti`                         | `bool`                                                                                             |          |         | Support multiple selected options                                                                                                                                                                                                                                                                                          |
+| `isAutofocussed`                  | `bool`                                                                                             |          |         | Focus the control when it is mounted. Renamed autoFocus of react-select                                                                                                                                                                                                                                                    |
+| `noOptionsMessage`                | `func`                                                                                             |          |         | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.                                |
+| `maxMenuHeight`                   | `number`                                                                                           |          | `220`   | Maximum height of the menu before scrolling                                                                                                                                                                                                                                                                                |
+| `menuPortalTarget`                | `SafeHTMLElement`                                                                                  |          |         | Dom element to portal the select menu to                                                                                                                                                                                                                                                                                   |
+| `menuPortalZIndex`                | `number`                                                                                           |          | `1`     | z-index value for the menu portal                                                                                                                                                                                                                                                                                          |
+| `menuShouldBlockScroll`           | `bool`                                                                                             |          |         | whether the menu should block scroll while open                                                                                                                                                                                                                                                                            |
+| `showOptionGroupDivider`          | `bool`                                                                                             |          |         | Determines if option groups will be separated by a divider                                                                                                                                                                                                                                                                 |
+| `defaultOptions`                  | `<bool, arrayOf>`                                                                                  |          |         | The default set of options to show before the user starts searching. When set to `true`, the results for `loadOptions('')` will be autoloaded.                                                                                                                                                                             |
+| `defaultOptions<arrayOf>`         | `array`                                                                                            |          |         |                                                                                                                                                                                                                                                                                                                            |
+| `defaultOptions<arrayOf>[].value` | `string`                                                                                           |    ✅    |         |                                                                                                                                                                                                                                                                                                                            |
+| `defaultOptions<arrayOf>[].label` | `string`                                                                                           |          |         |                                                                                                                                                                                                                                                                                                                            |
+| `onBlur`                          | `func`                                                                                             |          |         | Handle blur events on the control                                                                                                                                                                                                                                                                                          |
+| `onChange`                        | `func`                                                                                             |    ✅    |         | Called with a fake event when value changes.&#xA;<br />&#xA;The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.&#xA;<br />&#xA;Signature: `(event, action) => void` |
+| `onFocus`                         | `func`                                                                                             |          |         | Handle focus events on the control                                                                                                                                                                                                                                                                                         |
+| `onInputChange`                   | `func`                                                                                             |          |         | Handle change events on the input&#xA;<br />&#xA;Signature: `(inputValue, action) => void`                                                                                                                                                                                                                                 |
+| `tabSelectsValue`                 | `bool`                                                                                             |          |         | Select the currently focused option when the user presses tab                                                                                                                                                                                                                                                              |
+| `loadOptions`                     | `func`                                                                                             |    ✅    |         | Function that returns a promise, which is the set of options to be used once the promise resolves.                                                                                                                                                                                                                         |
+| `loadingMessage`                  | `<string, func>`                                                                                   |          |         | The text shown while the options are being loaded                                                                                                                                                                                                                                                                          |
+| `cacheOptions`                    | `any`                                                                                              |          |         | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.                                                                                                                                                                                                    |
+| `filterOption`                    | `func`                                                                                             |          |         | Custom method to filter whether an option should be displayed in the menu                                                                                                                                                                                                                                                  |
+| `optionType`                      | `enum`<br/>Possible values:<br/>`'single-property', 'double-property', 'multiple-properties'`      |          |         | The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info                                                                                                                                                                                                    |
+
+The underlying `@commercetools-uikit/async-select-input` is built on top of [`react-select`](https://github.com/JedWatson/react-select) v3. `@commercetools-uikit/async-select-input` supports mostly the same properties as `react-select` with some minor changes in the behaviour of some of the props. The `@commercetools-uikit/search-select-input` which is built on top `@commercetools-uikit/async-select-input` has predefined values for some the props. The props that have predefined values in `@commercetools-uikit/search-select-input` are as follows:
+
+- `components.DropdownIndicator`: Default dropdown indicator is replaced with search icon indicator
+- `components.Option`: The option shown in the dropdown menu can be one of `singled-lined`, `brief-detailed`, or `extended-detailed` types. However, if someone still wants to have a different option layout, they can still pass their own `components.Option` to `@commercetools-uikit/search-select-input`
+- `isSearchable`: `true`
+- `iconLeft`: `undefined`
+
+See the [official documentation](https://react-select.com/components) for more information about the available props.

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

@@ -0,0 +1,322 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+var PropTypes = require('prop-types');
+var reactIntl = require('react-intl');
+var utils = require('@commercetools-uikit/utils');
+var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
+var selectUtils = require('@commercetools-uikit/select-utils');
+var _styled = require('@emotion/styled/base');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+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 AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var messages = reactIntl.defineMessages({
+  noOptionsMessage: {
+    id: 'UIKit.SearchSelectInput.noOptionsMessage',
+    description: 'Text of search select dropdown when no options match search text',
+    defaultMessage: 'No matches found for your search term'
+  },
+  loadingOptionsMessage: {
+    id: 'UIKit.SearchSelectInput.loadingOptionsMessage',
+    description: 'Text showed while the options are being loaded',
+    defaultMessage: 'Loading exact matches'
+  },
+  placeholderMessage: {
+    id: 'UIKit.SearchSelectInput.placeholderMessage',
+    description: 'Placeholder text for the input',
+    defaultMessage: 'Search by…'
+  }
+});
+
+var SearchSelectInputWrapper = _styled__default['default']("div", process.env.NODE_ENV === "production" ? {
+  target: "ec7yve10"
+} : {
+  target: "ec7yve10",
+  label: "SearchSelectInputWrapper"
+})(function (props) {
+  return !props.isDisabled && !props.isReadOnly ? "div[class$='control'] {\n        &:hover {\n          cursor: text;\n        }\n        div[class$='indicatorContainer' i] {\n          cursor: pointer;\n          svg * {\n            fill: ".concat(designSystem.customProperties.colorSolid, ";\n          }\n        }\n      }") : '';
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkyQyIsImZpbGUiOiJzZWFyY2gtc2VsZWN0LWlucHV0LnN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnQgKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG5jb25zdCBTZWFyY2hTZWxlY3RJbnB1dFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAkeyhwcm9wcykgPT5cbiAgICAhcHJvcHMuaXNEaXNhYmxlZCAmJiAhcHJvcHMuaXNSZWFkT25seVxuICAgICAgPyBgZGl2W2NsYXNzJD0nY29udHJvbCddIHtcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgY3Vyc29yOiB0ZXh0O1xuICAgICAgICB9XG4gICAgICAgIGRpdltjbGFzcyQ9J2luZGljYXRvckNvbnRhaW5lcicgaV0ge1xuICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgICBzdmcgKiB7XG4gICAgICAgICAgICBmaWxsOiAke3ZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9YFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB7IFNlYXJjaFNlbGVjdElucHV0V3JhcHBlciB9O1xuIl19 */"));
+
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, 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 _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var SearchSelectInput = function SearchSelectInput(props) {
+  var intl = reactIntl.useIntl();
+
+  var noOptionsMessage = props.noOptionsMessage || function () {
+    return intl.formatMessage(messages.noOptionsMessage);
+  };
+
+  var loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
+  var placeholder = props.placeholder || intl.formatMessage(messages.placeholderMessage);
+  var optionType = props.optionType;
+  var components = react.useMemo(function () {
+    return _objectSpread(_objectSpread({
+      // eslint-disable-next-line react/display-name
+      Option: function Option(optionInnerProps) {
+        return jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
+          optionType: optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    }, props.components), {}, {
+      DropdownIndicator: selectUtils.SearchIconDropdownIndicator
+    });
+  }, [props.components, optionType]);
+  return jsxRuntime.jsx(SearchSelectInputWrapper, {
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    children: jsxRuntime.jsx(AsyncSelectInput__default['default'], _objectSpread(_objectSpread({}, props), {}, {
+      components: components,
+      placeholder: placeholder,
+      iconLeft: undefined,
+      loadingMessage: loadingMessage,
+      noOptionsMessage: noOptionsMessage,
+      isSearchable: true
+    }))
+  });
+};
+
+SearchSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   *Horizontal size limit of the input fields.
+   */
+  horizontalConstraint: PropTypes__default['default'].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * Aria label (for assistive tech)
+   */
+  'aria-label': PropTypes__default['default'].string,
+
+  /**
+   * HTML ID of an element that should be used as the label (for assistive tech)
+   */
+  'aria-labelledby': PropTypes__default['default'].string,
+
+  /**
+   * The id of the search input. This forwarded as react-select's "inputId"
+   */
+  id: PropTypes__default['default'].string,
+
+  /**
+   * The id to set on the SelectContainer component. This is forwarded as react-select's "id"
+   */
+  containerId: PropTypes__default['default'].string,
+
+  /**
+   * Name of the HTML Input (optional - without this, no input will be rendered)
+   */
+  name: PropTypes__default['default'].string,
+
+  /**
+   * Placeholder text for the select value
+   */
+  placeholder: PropTypes__default['default'].string,
+
+  /**
+   * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
+   */
+  components: PropTypes__default['default'].objectOf(PropTypes__default['default'].func),
+
+  /**
+   * Sets the tabIndex attribute on the input
+   */
+  tabIndex: PropTypes__default['default'].string,
+
+  /**
+   * The value of the select; reflected by the selected option
+   */
+  value: function value(props) {
+    var _context, _context2;
+
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+
+    return props.isMulti ? PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
+      value: PropTypes__default['default'].string.isRequired
+    })).apply(void 0, _concatInstanceProperty__default['default'](_context = [props]).call(_context, rest)) : PropTypes__default['default'].shape({
+      value: PropTypes__default['default'].string.isRequired
+    }).apply(void 0, _concatInstanceProperty__default['default'](_context2 = [props]).call(_context2, rest));
+  },
+
+  /**
+   * Remove the currently focused option when the user presses backspace
+   */
+  backspaceRemovesValue: PropTypes__default['default'].bool,
+
+  /**
+   * Indicates the input field has an error
+   */
+  hasError: PropTypes__default['default'].bool,
+
+  /**
+   * Indicates the input field has a warning
+   */
+  hasWarning: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select read-only
+   */
+  isReadOnly: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select disabled
+   */
+  isDisabled: PropTypes__default['default'].bool,
+
+  /**
+   * Is the select value clearable
+   */
+  isClearable: PropTypes__default['default'].bool,
+
+  /**
+   * Override the built-in logic to detect whether an option is disabled
+   */
+  isOptionDisabled: PropTypes__default['default'].func,
+
+  /**
+   * Support multiple selected options
+   */
+  isMulti: PropTypes__default['default'].bool,
+
+  /**
+   * Focus the control when it is mounted. Renamed autoFocus of react-select
+   */
+  isAutofocussed: PropTypes__default['default'].bool,
+
+  /**
+   * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
+   */
+  noOptionsMessage: PropTypes__default['default'].func,
+
+  /**
+   * Maximum height of the menu before scrolling
+   */
+  maxMenuHeight: PropTypes__default['default'].number,
+
+  /**
+   * Dom element to portal the select menu to
+   */
+  menuPortalTarget: PropTypes__default['default'].instanceOf(utils.SafeHTMLElement),
+
+  /**
+   * z-index value for the menu portal
+   */
+  menuPortalZIndex: PropTypes__default['default'].number.isRequired,
+
+  /**
+   * whether the menu should block scroll while open
+   */
+  menuShouldBlockScroll: PropTypes__default['default'].bool,
+
+  /**
+   * Determines if option groups will be separated by a divider
+   */
+  showOptionGroupDivider: PropTypes__default['default'].bool,
+
+  /**
+   * The default set of options to show before the user starts searching. When set to `true`, the results for `loadOptions('')` will be autoloaded.
+   */
+  defaultOptions: PropTypes__default['default'].oneOfType([PropTypes__default['default'].bool, PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
+    value: PropTypes__default['default'].string.isRequired,
+    label: PropTypes__default['default'].string
+  }))]),
+
+  /**
+   * Handle blur events on the control
+   */
+  onBlur: PropTypes__default['default'].func,
+
+  /**
+   * Called with a fake event when value changes.
+   * <br />
+   * The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
+   * <br />
+   * Signature: `(event, action) => void`
+   */
+  onChange: PropTypes__default['default'].func.isRequired,
+
+  /**
+   * Handle focus events on the control
+   */
+  onFocus: PropTypes__default['default'].func,
+
+  /**
+   * Handle change events on the input
+   * <br />
+   * Signature: `(inputValue, action) => void`
+   */
+  onInputChange: PropTypes__default['default'].func,
+
+  /**
+   * Select the currently focused option when the user presses tab
+   */
+  tabSelectsValue: PropTypes__default['default'].bool,
+
+  /**
+   * Function that returns a promise, which is the set of options to be used once the promise resolves.
+   */
+  loadOptions: PropTypes__default['default'].func.isRequired,
+
+  /**
+   * The text shown while the options are being loaded
+   */
+  loadingMessage: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].func]),
+
+  /**
+   * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
+   */
+  cacheOptions: PropTypes__default['default'].any,
+
+  /**
+   * Custom method to filter whether an option should be displayed in the menu
+   */
+  filterOption: PropTypes__default['default'].func,
+
+  /**
+   * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
+   */
+  optionType: PropTypes__default['default'].oneOf(['single-property', 'double-property', 'multiple-properties'])
+} : {};
+SearchSelectInput.defaultProps = {
+  value: null,
+  menuPortalZIndex: 1,
+  maxMenuHeight: 220
+};
+SearchSelectInput.displayName = 'SearchSelectInput';
+var SearchSelectInput$1 = SearchSelectInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = SearchSelectInput$1;
+exports.version = version;

package/dist/commercetools-uikit-search-select-input.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-search-select-input.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-search-select-input.cjs.dev.js");
+}

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

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+require('prop-types');
+var reactIntl = require('react-intl');
+require('@commercetools-uikit/utils');
+var AsyncSelectInput = require('@commercetools-uikit/async-select-input');
+var selectUtils = require('@commercetools-uikit/select-utils');
+var _styled = require('@emotion/styled/base');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var AsyncSelectInput__default = /*#__PURE__*/_interopDefault(AsyncSelectInput);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var messages = reactIntl.defineMessages({
+  noOptionsMessage: {
+    id: 'UIKit.SearchSelectInput.noOptionsMessage',
+    description: 'Text of search select dropdown when no options match search text',
+    defaultMessage: 'No matches found for your search term'
+  },
+  loadingOptionsMessage: {
+    id: 'UIKit.SearchSelectInput.loadingOptionsMessage',
+    description: 'Text showed while the options are being loaded',
+    defaultMessage: 'Loading exact matches'
+  },
+  placeholderMessage: {
+    id: 'UIKit.SearchSelectInput.placeholderMessage',
+    description: 'Placeholder text for the input',
+    defaultMessage: 'Search by…'
+  }
+});
+
+var SearchSelectInputWrapper = _styled__default['default']("div", {
+  target: "ec7yve10"
+} )(function (props) {
+  return !props.isDisabled && !props.isReadOnly ? "div[class$='control'] {\n        &:hover {\n          cursor: text;\n        }\n        div[class$='indicatorContainer' i] {\n          cursor: pointer;\n          svg * {\n            fill: ".concat(designSystem.customProperties.colorSolid, ";\n          }\n        }\n      }") : '';
+}, ";" + ("" ));
+
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, 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 _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var SearchSelectInput = function SearchSelectInput(props) {
+  var intl = reactIntl.useIntl();
+
+  var noOptionsMessage = props.noOptionsMessage || function () {
+    return intl.formatMessage(messages.noOptionsMessage);
+  };
+
+  var loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
+  var placeholder = props.placeholder || intl.formatMessage(messages.placeholderMessage);
+  var optionType = props.optionType;
+  var components = react.useMemo(function () {
+    return _objectSpread(_objectSpread({
+      // eslint-disable-next-line react/display-name
+      Option: function Option(optionInnerProps) {
+        return jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
+          optionType: optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    }, props.components), {}, {
+      DropdownIndicator: selectUtils.SearchIconDropdownIndicator
+    });
+  }, [props.components, optionType]);
+  return jsxRuntime.jsx(SearchSelectInputWrapper, {
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    children: jsxRuntime.jsx(AsyncSelectInput__default['default'], _objectSpread(_objectSpread({}, props), {}, {
+      components: components,
+      placeholder: placeholder,
+      iconLeft: undefined,
+      loadingMessage: loadingMessage,
+      noOptionsMessage: noOptionsMessage,
+      isSearchable: true
+    }))
+  });
+};
+
+SearchSelectInput.propTypes = {};
+SearchSelectInput.defaultProps = {
+  value: null,
+  menuPortalZIndex: 1,
+  maxMenuHeight: 220
+};
+SearchSelectInput.displayName = 'SearchSelectInput';
+var SearchSelectInput$1 = SearchSelectInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = SearchSelectInput$1;
+exports.version = version;

package/dist/commercetools-uikit-search-select-input.esm.js

@@ -0,0 +1,302 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import { SafeHTMLElement } from '@commercetools-uikit/utils';
+import AsyncSelectInput from '@commercetools-uikit/async-select-input';
+import { CustomSelectInputOption, SearchIconDropdownIndicator } from '@commercetools-uikit/select-utils';
+import _styled from '@emotion/styled/base';
+import { customProperties } from '@commercetools-uikit/design-system';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+var messages = defineMessages({
+  noOptionsMessage: {
+    id: 'UIKit.SearchSelectInput.noOptionsMessage',
+    description: 'Text of search select dropdown when no options match search text',
+    defaultMessage: 'No matches found for your search term'
+  },
+  loadingOptionsMessage: {
+    id: 'UIKit.SearchSelectInput.loadingOptionsMessage',
+    description: 'Text showed while the options are being loaded',
+    defaultMessage: 'Loading exact matches'
+  },
+  placeholderMessage: {
+    id: 'UIKit.SearchSelectInput.placeholderMessage',
+    description: 'Placeholder text for the input',
+    defaultMessage: 'Search by…'
+  }
+});
+
+var SearchSelectInputWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ec7yve10"
+} : {
+  target: "ec7yve10",
+  label: "SearchSelectInputWrapper"
+})(function (props) {
+  return !props.isDisabled && !props.isReadOnly ? "div[class$='control'] {\n        &:hover {\n          cursor: text;\n        }\n        div[class$='indicatorContainer' i] {\n          cursor: pointer;\n          svg * {\n            fill: ".concat(customProperties.colorSolid, ";\n          }\n        }\n      }") : '';
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkyQyIsImZpbGUiOiJzZWFyY2gtc2VsZWN0LWlucHV0LnN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnQgKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG5jb25zdCBTZWFyY2hTZWxlY3RJbnB1dFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAkeyhwcm9wcykgPT5cbiAgICAhcHJvcHMuaXNEaXNhYmxlZCAmJiAhcHJvcHMuaXNSZWFkT25seVxuICAgICAgPyBgZGl2W2NsYXNzJD0nY29udHJvbCddIHtcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgY3Vyc29yOiB0ZXh0O1xuICAgICAgICB9XG4gICAgICAgIGRpdltjbGFzcyQ9J2luZGljYXRvckNvbnRhaW5lcicgaV0ge1xuICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgICBzdmcgKiB7XG4gICAgICAgICAgICBmaWxsOiAke3ZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9YFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB7IFNlYXJjaFNlbGVjdElucHV0V3JhcHBlciB9O1xuIl19 */"));
+
+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 _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var SearchSelectInput = function SearchSelectInput(props) {
+  var intl = useIntl();
+
+  var noOptionsMessage = props.noOptionsMessage || function () {
+    return intl.formatMessage(messages.noOptionsMessage);
+  };
+
+  var loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
+  var placeholder = props.placeholder || intl.formatMessage(messages.placeholderMessage);
+  var optionType = props.optionType;
+  var components = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      // eslint-disable-next-line react/display-name
+      Option: function Option(optionInnerProps) {
+        return jsx(CustomSelectInputOption, {
+          optionType: optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    }, props.components), {}, {
+      DropdownIndicator: SearchIconDropdownIndicator
+    });
+  }, [props.components, optionType]);
+  return jsx(SearchSelectInputWrapper, {
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    children: jsx(AsyncSelectInput, _objectSpread(_objectSpread({}, props), {}, {
+      components: components,
+      placeholder: placeholder,
+      iconLeft: undefined,
+      loadingMessage: loadingMessage,
+      noOptionsMessage: noOptionsMessage,
+      isSearchable: true
+    }))
+  });
+};
+
+SearchSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   *Horizontal size limit of the input fields.
+   */
+  horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+
+  /**
+   * Aria label (for assistive tech)
+   */
+  'aria-label': PropTypes.string,
+
+  /**
+   * HTML ID of an element that should be used as the label (for assistive tech)
+   */
+  'aria-labelledby': PropTypes.string,
+
+  /**
+   * The id of the search input. This forwarded as react-select's "inputId"
+   */
+  id: PropTypes.string,
+
+  /**
+   * The id to set on the SelectContainer component. This is forwarded as react-select's "id"
+   */
+  containerId: PropTypes.string,
+
+  /**
+   * Name of the HTML Input (optional - without this, no input will be rendered)
+   */
+  name: PropTypes.string,
+
+  /**
+   * Placeholder text for the select value
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
+   */
+  components: PropTypes.objectOf(PropTypes.func),
+
+  /**
+   * Sets the tabIndex attribute on the input
+   */
+  tabIndex: PropTypes.string,
+
+  /**
+   * The value of the select; reflected by the selected option
+   */
+  value: function value(props) {
+    var _context, _context2;
+
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+
+    return props.isMulti ? PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired
+    })).apply(void 0, _concatInstanceProperty(_context = [props]).call(_context, rest)) : PropTypes.shape({
+      value: PropTypes.string.isRequired
+    }).apply(void 0, _concatInstanceProperty(_context2 = [props]).call(_context2, rest));
+  },
+
+  /**
+   * Remove the currently focused option when the user presses backspace
+   */
+  backspaceRemovesValue: PropTypes.bool,
+
+  /**
+   * Indicates the input field has an error
+   */
+  hasError: PropTypes.bool,
+
+  /**
+   * Indicates the input field has a warning
+   */
+  hasWarning: PropTypes.bool,
+
+  /**
+   * Is the select read-only
+   */
+  isReadOnly: PropTypes.bool,
+
+  /**
+   * Is the select disabled
+   */
+  isDisabled: PropTypes.bool,
+
+  /**
+   * Is the select value clearable
+   */
+  isClearable: PropTypes.bool,
+
+  /**
+   * Override the built-in logic to detect whether an option is disabled
+   */
+  isOptionDisabled: PropTypes.func,
+
+  /**
+   * Support multiple selected options
+   */
+  isMulti: PropTypes.bool,
+
+  /**
+   * Focus the control when it is mounted. Renamed autoFocus of react-select
+   */
+  isAutofocussed: PropTypes.bool,
+
+  /**
+   * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
+   */
+  noOptionsMessage: PropTypes.func,
+
+  /**
+   * Maximum height of the menu before scrolling
+   */
+  maxMenuHeight: PropTypes.number,
+
+  /**
+   * Dom element to portal the select menu to
+   */
+  menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
+
+  /**
+   * z-index value for the menu portal
+   */
+  menuPortalZIndex: PropTypes.number.isRequired,
+
+  /**
+   * whether the menu should block scroll while open
+   */
+  menuShouldBlockScroll: PropTypes.bool,
+
+  /**
+   * Determines if option groups will be separated by a divider
+   */
+  showOptionGroupDivider: PropTypes.bool,
+
+  /**
+   * The default set of options to show before the user starts searching. When set to `true`, the results for `loadOptions('')` will be autoloaded.
+   */
+  defaultOptions: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string
+  }))]),
+
+  /**
+   * Handle blur events on the control
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Called with a fake event when value changes.
+   * <br />
+   * The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
+   * <br />
+   * Signature: `(event, action) => void`
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Handle focus events on the control
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Handle change events on the input
+   * <br />
+   * Signature: `(inputValue, action) => void`
+   */
+  onInputChange: PropTypes.func,
+
+  /**
+   * Select the currently focused option when the user presses tab
+   */
+  tabSelectsValue: PropTypes.bool,
+
+  /**
+   * Function that returns a promise, which is the set of options to be used once the promise resolves.
+   */
+  loadOptions: PropTypes.func.isRequired,
+
+  /**
+   * The text shown while the options are being loaded
+   */
+  loadingMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+  /**
+   * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
+   */
+  cacheOptions: PropTypes.any,
+
+  /**
+   * Custom method to filter whether an option should be displayed in the menu
+   */
+  filterOption: PropTypes.func,
+
+  /**
+   * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
+   */
+  optionType: PropTypes.oneOf(['single-property', 'double-property', 'multiple-properties'])
+} : {};
+SearchSelectInput.defaultProps = {
+  value: null,
+  menuPortalZIndex: 1,
+  maxMenuHeight: 220
+};
+SearchSelectInput.displayName = 'SearchSelectInput';
+var SearchSelectInput$1 = SearchSelectInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { SearchSelectInput$1 as default, version };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@commercetools-uikit/search-select-input",
+  "description": "A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/inputs/search-select-input"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-search-select-input.cjs.js",
+  "module": "dist/commercetools-uikit-search-select-input.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/async-select-input": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/select-utils": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/text": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.7.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-intl": "5.20.7"
+  },
+  "peerDependencies": {
+    "react": "17.x",
+    "react-dom": "17.x",
+    "react-intl": "5.x"
+  }
+}