@commercetools-uikit/search-text-input 0.0.0-canary-20230209162741

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 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,103 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# SearchTextInput
+
+## Description
+
+A controlled search text input component for single-line strings with validation states.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/search-text-input
+```
+
+```
+npm --save install @commercetools-uikit/search-text-input
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import SearchTextInput from '@commercetools-uikit/search-text-input';
+
+const Example = () => (
+  <SearchTextInput
+    value="foo"
+    onChange={(event) => alert(event.target.value)}
+    onSubmit={(val) => alert(val)}
+    onReset={() => alert('reset')}
+  />
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props                  | Type                                                                                                  | Required | Default   | Description                                                                                                               |
+| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `id`                   | `string`                                                                                              |          |           | Used as HTML id property. An id is auto-generated when it is not specified.                                               |
+| `autoComplete`         | `string`                                                                                              |          |           | Used as HTML autocomplete property                                                                                        |
+| `aria-invalid`         | `boolean`                                                                                             |          |           | Indicate if the value entered in the input is invalid.                                                                    |
+| `aria-errormessage`    | `string`                                                                                              |          |           | HTML ID of an element containing an error message related to the input.                                                   |
+| `name`                 | `string`                                                                                              |          |           | Used as HTML name of the input component property.                                                                        |
+| `value`                | `string`                                                                                              |    ✅    |           | Value of the input component.                                                                                             |
+| `onChange`             | `ChangeEventHandler`                                                                                  |          |           | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
+| `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred                                                                                              |
+| `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused                                                                                              |
+| `onSubmit`             | `Function`<br/>[See signature.](#signature-onSubmit)                                                  |    ✅    |           | Handler when the search button is clicked.                                                                                |
+| `onReset`              | `Function`<br/>[See signature.](#signature-onReset)                                                   |    ✅    |           | Handler when the clear button is clicked.                                                                                 |
+| `isAutofocussed`       | `boolean`                                                                                             |          |           | Focus the input on initial render                                                                                         |
+| `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                            |
+| `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                                                  |
+| `hasError`             | `boolean`                                                                                             |          |           | Indicates if the input has invalid values                                                                                 |
+| `hasWarning`           | `boolean`                                                                                             |          |           | Indicates if the input has warning values                                                                                 |
+| `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                                            |
+| `isClearable`          | `boolean`                                                                                             |          | `true`    | Indicates if the input should be cleared when the clear button is clicked.&#xA;Defaults to true.                          |
+| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          | `'scale'` | Horizontal size limit of the input fields.                                                                                |
+
+## Signatures
+
+### Signature `onSubmit`
+
+```ts
+(searchValue: string) => void
+```
+
+### Signature `onReset`
+
+```ts
+() => void
+```
+
+## `data-*` props
+
+The component further forwards all `data-` attributes to the underlying `input` component.
+
+## Static methods
+
+### `SearchTextInput.isEmpty`
+
+Returns `true` when the value is considered empty, which is when the value is empty or consists of spaces only.
+
+```js
+SearchTextInput.isEmpty(''); // -> true
+SearchTextInput.isEmpty(' '); // -> true
+SearchTextInput.isEmpty('tree'); // -> false
+```
+
+## Main Functions and use cases are:
+
+- Input field for single-line strings. Used for search.

package/dist/commercetools-uikit-search-text-input.cjs.d.ts

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

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

@@ -0,0 +1,247 @@
+'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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var react$1 = require('react');
+var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var Constraints = require('@commercetools-uikit/constraints');
+var icons = require('@commercetools-uikit/icons');
+var utils = require('@commercetools-uikit/utils');
+var react = require('@emotion/react');
+var inputUtils = require('@commercetools-uikit/input-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 }; }
+
+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 _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var getInputContainerBorderColor = function getInputContainerBorderColor(props) {
+  var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
+
+  if (props.isDisabled) {
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
+  }
+
+  if (props.hasError) {
+    return designSystem.designTokens.borderColorForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.borderColorForInputWhenWarning;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getInputBoxShadow = function getInputBoxShadow(props) {
+  if (props.hasError) {
+    return designSystem.designTokens.shadowForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.shadowForInputWhenWarning;
+  }
+
+  return designSystem.designTokens.shadowForInput;
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "8clkw3",
+  styles: "border:none;background:none;&,&:focus{box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}"
+} : {
+  name: "wtnvai-getSearchTextInputStyles",
+  styles: "border:none;background:none;&,&:focus{box-shadow:none;}&:focus,&:hover{background-color:transparent!important;};label:getSearchTextInputStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ0siLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var getSearchTextInputStyles = function getSearchTextInputStyles(props) {
+  return [inputUtils.getInputStyles(props), _ref];
+};
+
+var getButtonStyles = function getButtonStyles() {
+  return /*#__PURE__*/react.css("border:none;background:none;height:100%;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3RGlDIiwiZmlsZSI6InNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldElucHV0U3R5bGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaW5wdXQtdXRpbHMnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBoYXNFcnJvcj86IGJvb2xlYW47XG4gIGhhc1dhcm5pbmc/OiBib29sZWFuO1xuICBpc1JlYWRPbmx5PzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldElucHV0Q29udGFpbmVyQm9yZGVyQ29sb3IgPSAoXG4gIHByb3BzOiBUSW5wdXRQcm9wcyxcbiAgZGVmYXVsdENvbG9yOiBzdHJpbmcgPSBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFxuKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZWZhdWx0Q29sb3I7XG59O1xuXG5jb25zdCBnZXRJbnB1dEJveFNoYWRvdyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0U2VhcmNoVGV4dElucHV0U3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gIGNzc2BcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAmLFxuICAgICY6Zm9jdXMge1xuICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICB9XG4gICAgJjpmb2N1cyxcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50ICFpbXBvcnRhbnQ7XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0QnV0dG9uU3R5bGVzID0gKCkgPT4gY3NzYFxuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGhlaWdodDogMTAwJTtcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgYm9yZGVyLWxlZnQ6IG5vbmU7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgIGJhY2tncm91bmQtY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfTtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuYDtcblxuY29uc3QgZ2V0SWNvbkNvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcywgZGVmYXVsdENvbG9yOiBzdHJpbmcpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JTZWFyY2hJbnB1dEljb25XaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldENsZWFySWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yQ2xlYXJJbnB1dEljb259O1xuICAgIGZpbGw6ICR7Z2V0SWNvbkNvbG9yKHByb3BzLCBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb24pfTtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGZpbGw6ICR7Z2V0SWNvbkNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvckNsZWFySW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldEJ1dHRvblN0eWxlcygpLFxuICBjc3NgXG4gICAgbWFyZ2luLXJpZ2h0OiAke2Rlc2lnblRva2Vucy5tYXJnaW5SaWdodEZvclNlYXJjaElucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JTZWFyY2hJbnB1dEljb24pfTtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGZpbGw6ICR7Z2V0SWNvbkNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5Ib3ZlcmVkXG4gICAgICApfTtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCYWNrZ3JvdW5kV2hlbkhvdmVyZWQgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkO1xufTtcblxuY29uc3QgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNEaXNhYmxlZFxuICAgICAgPyBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWRcbiAgICAgIDogZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0fTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldElucHV0Q29udGFpbmVyQm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm94LXNoYWRvdzogJHtnZXRJbnB1dEJveFNoYWRvdyhwcm9wcyl9O1xuICAgIGhlaWdodDogJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9O1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgJjpob3ZlciB7XG4gICAgICBib3JkZXItY29sb3I6ICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihcbiAgICAgICAgcHJvcHMsXG4gICAgICAgIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kV2hlbkhvdmVyZWQocHJvcHMpfTtcbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICBib3JkZXItY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5ib3hTaGFkb3dGb3JEYXRldGltZUlucHV0V2hlbkhvdmVyZWR9XG4gICAgICAgICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmZvY3VzIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICB9XG4gIGAsXG5dO1xuXG5leHBvcnQge1xuICBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMsXG4gIGdldFNlYXJjaFRleHRJbnB1dENvbnRhaW5lclN0eWxlcyxcbiAgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzLFxuICBnZXRTZWFyY2hJY29uQnV0dG9uU3R5bGVzLFxufTtcbiJdfQ== */");
+};
+
+var getIconColor = function getIconColor(props, defaultColor) {
+  if (props.isDisabled) {
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.fontColorForSearchInputIconWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getClearIconButtonStyles = function getClearIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForClearInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIconWhenHovered), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getClearIconButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRksiLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */")];
+};
+
+var getSearchIconButtonStyles = function getSearchIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForSearchInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIconWhenHovered), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getSearchIconButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnR0siLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */")];
+};
+
+var getBackgroundWhenHovered = function getBackgroundWhenHovered(props) {
+  if (props.isDisabled) {
+    return designSystem.designTokens.backgroundColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.backgroundColorForInput;
+  }
+
+  return designSystem.designTokens.backgroundColorForInputWhenHovered;
+};
+
+var getSearchTextInputContainerStyles = function getSearchTextInputContainerStyles(props) {
+  return [/*#__PURE__*/react.css("display:flex;align-items:center;background-color:", props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", designSystem.designTokens.heightForInput, ";box-sizing:border-box;&:hover{border-color:", getInputContainerBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundWhenHovered(props), ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, " ", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{background-color:", designSystem.designTokens.colorSurface, ";}}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getSearchTextInputContainerStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1SEsiLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */")];
+};
+
+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; }
+var defaultProps = {
+  horizontalConstraint: 'scale',
+  isClearable: true
+};
+
+var SearchTextInput = function SearchTextInput(props) {
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'TextInput: `onChange` is required when is not read only.') : void 0;
+  }
+
+  var _useState = react$1.useState(props.value || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+
+    if (props.onReset) {
+      props.onReset();
+    }
+  };
+
+  var handleChange = function handleChange(event) {
+    setSearchValue(event.target.value);
+
+    if (props.onChange) {
+      props.onChange(event);
+    }
+  };
+
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+
+    if (props.onSubmit) {
+      props.onSubmit(searchValue);
+    }
+  };
+
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs("div", {
+      css: getSearchTextInputContainerStyles(props),
+      children: [jsxRuntime.jsx("input", _objectSpread({
+        id: props.id,
+        name: props.name,
+        type: "text",
+        value: searchValue,
+        onChange: handleChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        disabled: props.isDisabled,
+        placeholder: props.placeholder,
+        readOnly: props.isReadOnly,
+        autoFocus: props.isAutofocussed,
+        autoComplete: props.autoComplete,
+        "aria-readonly": props.isReadOnly,
+        contentEditable: !props.isReadOnly,
+        "aria-invalid": props['aria-invalid'],
+        "aria-errormessage": props['aria-errormessage'],
+        css: getSearchTextInputStyles(props)
+      }, utils.filterDataAttributes(props))), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        icon: jsxRuntime.jsx(icons.CloseIcon, {
+          size: "medium"
+        }),
+        label: 'clear-button',
+        onClick: handleClear,
+        css: getClearIconButtonStyles(props)
+      }), jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        icon: jsxRuntime.jsx(icons.SearchIcon, {}),
+        label: 'search-button',
+        onClick: handleSubmit,
+        css: getSearchIconButtonStyles(props)
+      })]
+    })
+  });
+};
+
+SearchTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _pt__default["default"].string,
+  autoComplete: _pt__default["default"].string,
+  'aria-invalid': _pt__default["default"].bool,
+  'aria-errormessage': _pt__default["default"].string,
+  name: _pt__default["default"].string,
+  value: _pt__default["default"].string.isRequired,
+  onChange: _pt__default["default"].func,
+  onBlur: _pt__default["default"].func,
+  onFocus: _pt__default["default"].func,
+  onSubmit: _pt__default["default"].func.isRequired,
+  onReset: _pt__default["default"].func.isRequired,
+  isAutofocussed: _pt__default["default"].bool,
+  isDisabled: _pt__default["default"].bool,
+  isReadOnly: _pt__default["default"].bool,
+  hasError: _pt__default["default"].bool,
+  hasWarning: _pt__default["default"].bool,
+  placeholder: _pt__default["default"].string,
+  isClearable: _pt__default["default"].bool,
+  horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+SearchTextInput.displayName = 'SearchTextInput';
+SearchTextInput.defaultProps = defaultProps;
+
+SearchTextInput.isEmpty = function (value) {
+  return !value || _trimInstanceProperty__default["default"](value).call(value).length === 0;
+};
+
+var SearchTextInput$1 = SearchTextInput;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.11.2";
+
+exports["default"] = SearchTextInput$1;
+exports.version = version;

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

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

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

@@ -0,0 +1,217 @@
+'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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('prop-types');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var react$1 = require('react');
+var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var Constraints = require('@commercetools-uikit/constraints');
+var icons = require('@commercetools-uikit/icons');
+var utils = require('@commercetools-uikit/utils');
+var react = require('@emotion/react');
+var inputUtils = require('@commercetools-uikit/input-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 }; }
+
+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 _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+
+var getInputContainerBorderColor = function getInputContainerBorderColor(props) {
+  var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
+
+  if (props.isDisabled) {
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
+  }
+
+  if (props.hasError) {
+    return designSystem.designTokens.borderColorForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.borderColorForInputWhenWarning;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getInputBoxShadow = function getInputBoxShadow(props) {
+  if (props.hasError) {
+    return designSystem.designTokens.shadowForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.shadowForInputWhenWarning;
+  }
+
+  return designSystem.designTokens.shadowForInput;
+};
+
+var _ref = {
+  name: "8clkw3",
+  styles: "border:none;background:none;&,&:focus{box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}"
+} ;
+
+var getSearchTextInputStyles = function getSearchTextInputStyles(props) {
+  return [inputUtils.getInputStyles(props), _ref];
+};
+
+var getButtonStyles = function getButtonStyles() {
+  return /*#__PURE__*/react.css("border:none;background:none;height:100%;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";" + ("" ), "" );
+};
+
+var getIconColor = function getIconColor(props, defaultColor) {
+  if (props.isDisabled) {
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.fontColorForSearchInputIconWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getClearIconButtonStyles = function getClearIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForClearInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIconWhenHovered), ";}" + ("" ), "" )];
+};
+
+var getSearchIconButtonStyles = function getSearchIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForSearchInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIconWhenHovered), ";}" + ("" ), "" )];
+};
+
+var getBackgroundWhenHovered = function getBackgroundWhenHovered(props) {
+  if (props.isDisabled) {
+    return designSystem.designTokens.backgroundColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.backgroundColorForInput;
+  }
+
+  return designSystem.designTokens.backgroundColorForInputWhenHovered;
+};
+
+var getSearchTextInputContainerStyles = function getSearchTextInputContainerStyles(props) {
+  return [/*#__PURE__*/react.css("display:flex;align-items:center;background-color:", props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", designSystem.designTokens.heightForInput, ";box-sizing:border-box;&:hover{border-color:", getInputContainerBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundWhenHovered(props), ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, " ", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{background-color:", designSystem.designTokens.colorSurface, ";}}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
+};
+
+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; }
+var defaultProps = {
+  horizontalConstraint: 'scale',
+  isClearable: true
+};
+
+var SearchTextInput = function SearchTextInput(props) {
+  if (!props.isReadOnly) ;
+
+  var _useState = react$1.useState(props.value || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+
+    if (props.onReset) {
+      props.onReset();
+    }
+  };
+
+  var handleChange = function handleChange(event) {
+    setSearchValue(event.target.value);
+
+    if (props.onChange) {
+      props.onChange(event);
+    }
+  };
+
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+
+    if (props.onSubmit) {
+      props.onSubmit(searchValue);
+    }
+  };
+
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs("div", {
+      css: getSearchTextInputContainerStyles(props),
+      children: [jsxRuntime.jsx("input", _objectSpread({
+        id: props.id,
+        name: props.name,
+        type: "text",
+        value: searchValue,
+        onChange: handleChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        disabled: props.isDisabled,
+        placeholder: props.placeholder,
+        readOnly: props.isReadOnly,
+        autoFocus: props.isAutofocussed,
+        autoComplete: props.autoComplete,
+        "aria-readonly": props.isReadOnly,
+        contentEditable: !props.isReadOnly,
+        "aria-invalid": props['aria-invalid'],
+        "aria-errormessage": props['aria-errormessage'],
+        css: getSearchTextInputStyles(props)
+      }, utils.filterDataAttributes(props))), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        icon: jsxRuntime.jsx(icons.CloseIcon, {
+          size: "medium"
+        }),
+        label: 'clear-button',
+        onClick: handleClear,
+        css: getClearIconButtonStyles(props)
+      }), jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        icon: jsxRuntime.jsx(icons.SearchIcon, {}),
+        label: 'search-button',
+        onClick: handleSubmit,
+        css: getSearchIconButtonStyles(props)
+      })]
+    })
+  });
+};
+
+SearchTextInput.propTypes = {};
+SearchTextInput.displayName = 'SearchTextInput';
+SearchTextInput.defaultProps = defaultProps;
+
+SearchTextInput.isEmpty = function (value) {
+  return !value || _trimInstanceProperty__default["default"](value).call(value).length === 0;
+};
+
+var SearchTextInput$1 = SearchTextInput;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.11.2";
+
+exports["default"] = SearchTextInput$1;
+exports.version = version;

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

@@ -0,0 +1,227 @@
+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 _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _pt from 'prop-types';
+import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
+import { useState } from 'react';
+import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
+import Constraints from '@commercetools-uikit/constraints';
+import { CloseIcon, SearchIcon } from '@commercetools-uikit/icons';
+import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
+import { css } from '@emotion/react';
+import { getInputStyles } from '@commercetools-uikit/input-utils';
+import { designTokens } from '@commercetools-uikit/design-system';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var getInputContainerBorderColor = function getInputContainerBorderColor(props) {
+  var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designTokens.borderColorForInput;
+
+  if (props.isDisabled) {
+    return designTokens.borderColorForInputWhenDisabled;
+  }
+
+  if (props.hasError) {
+    return designTokens.borderColorForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designTokens.borderColorForInputWhenWarning;
+  }
+
+  if (props.isReadOnly) {
+    return designTokens.borderColorForInputWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getInputBoxShadow = function getInputBoxShadow(props) {
+  if (props.hasError) {
+    return designTokens.shadowForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designTokens.shadowForInputWhenWarning;
+  }
+
+  return designTokens.shadowForInput;
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "8clkw3",
+  styles: "border:none;background:none;&,&:focus{box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}"
+} : {
+  name: "wtnvai-getSearchTextInputStyles",
+  styles: "border:none;background:none;&,&:focus{box-shadow:none;}&:focus,&:hover{background-color:transparent!important;};label:getSearchTextInputStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ0siLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var getSearchTextInputStyles = function getSearchTextInputStyles(props) {
+  return [getInputStyles(props), _ref];
+};
+
+var getButtonStyles = function getButtonStyles() {
+  return /*#__PURE__*/css("border:none;background:none;height:100%;border-top-right-radius:", designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designTokens.transitionStandard, ",background-color ", designTokens.transitionStandard, ";transition:border-color ", designTokens.transitionStandard, ",box-shadow ", designTokens.transitionStandard, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3RGlDIiwiZmlsZSI6InNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldElucHV0U3R5bGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaW5wdXQtdXRpbHMnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBoYXNFcnJvcj86IGJvb2xlYW47XG4gIGhhc1dhcm5pbmc/OiBib29sZWFuO1xuICBpc1JlYWRPbmx5PzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldElucHV0Q29udGFpbmVyQm9yZGVyQ29sb3IgPSAoXG4gIHByb3BzOiBUSW5wdXRQcm9wcyxcbiAgZGVmYXVsdENvbG9yOiBzdHJpbmcgPSBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFxuKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZWZhdWx0Q29sb3I7XG59O1xuXG5jb25zdCBnZXRJbnB1dEJveFNoYWRvdyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0U2VhcmNoVGV4dElucHV0U3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gIGNzc2BcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAmLFxuICAgICY6Zm9jdXMge1xuICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICB9XG4gICAgJjpmb2N1cyxcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50ICFpbXBvcnRhbnQ7XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0QnV0dG9uU3R5bGVzID0gKCkgPT4gY3NzYFxuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGhlaWdodDogMTAwJTtcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgYm9yZGVyLWxlZnQ6IG5vbmU7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgIGJhY2tncm91bmQtY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfTtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuYDtcblxuY29uc3QgZ2V0SWNvbkNvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcywgZGVmYXVsdENvbG9yOiBzdHJpbmcpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JTZWFyY2hJbnB1dEljb25XaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldENsZWFySWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yQ2xlYXJJbnB1dEljb259O1xuICAgIGZpbGw6ICR7Z2V0SWNvbkNvbG9yKHByb3BzLCBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb24pfTtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGZpbGw6ICR7Z2V0SWNvbkNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvckNsZWFySW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldEJ1dHRvblN0eWxlcygpLFxuICBjc3NgXG4gICAgbWFyZ2luLXJpZ2h0OiAke2Rlc2lnblRva2Vucy5tYXJnaW5SaWdodEZvclNlYXJjaElucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JTZWFyY2hJbnB1dEljb24pfTtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGZpbGw6ICR7Z2V0SWNvbkNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5Ib3ZlcmVkXG4gICAgICApfTtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCYWNrZ3JvdW5kV2hlbkhvdmVyZWQgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkO1xufTtcblxuY29uc3QgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNEaXNhYmxlZFxuICAgICAgPyBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWRcbiAgICAgIDogZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0fTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldElucHV0Q29udGFpbmVyQm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm94LXNoYWRvdzogJHtnZXRJbnB1dEJveFNoYWRvdyhwcm9wcyl9O1xuICAgIGhlaWdodDogJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9O1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgJjpob3ZlciB7XG4gICAgICBib3JkZXItY29sb3I6ICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihcbiAgICAgICAgcHJvcHMsXG4gICAgICAgIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kV2hlbkhvdmVyZWQocHJvcHMpfTtcbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICBib3JkZXItY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5ib3hTaGFkb3dGb3JEYXRldGltZUlucHV0V2hlbkhvdmVyZWR9XG4gICAgICAgICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmZvY3VzIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICB9XG4gIGAsXG5dO1xuXG5leHBvcnQge1xuICBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMsXG4gIGdldFNlYXJjaFRleHRJbnB1dENvbnRhaW5lclN0eWxlcyxcbiAgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzLFxuICBnZXRTZWFyY2hJY29uQnV0dG9uU3R5bGVzLFxufTtcbiJdfQ== */");
+};
+
+var getIconColor = function getIconColor(props, defaultColor) {
+  if (props.isDisabled) {
+    return designTokens.fontColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designTokens.fontColorForSearchInputIconWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getClearIconButtonStyles = function getClearIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/css("margin-right:", designTokens.marginRightForClearInputIcon, ";fill:", getIconColor(props, designTokens.fontColorForClearInputIcon), ";&:hover{fill:", getIconColor(props, designTokens.fontColorForClearInputIconWhenHovered), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getClearIconButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRksiLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */")];
+};
+
+var getSearchIconButtonStyles = function getSearchIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/css("margin-right:", designTokens.marginRightForSearchInputIcon, ";fill:", getIconColor(props, designTokens.fontColorForSearchInputIcon), ";&:hover{fill:", getIconColor(props, designTokens.fontColorForSearchInputIconWhenHovered), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getSearchIconButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnR0siLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */")];
+};
+
+var getBackgroundWhenHovered = function getBackgroundWhenHovered(props) {
+  if (props.isDisabled) {
+    return designTokens.backgroundColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designTokens.backgroundColorForInput;
+  }
+
+  return designTokens.backgroundColorForInputWhenHovered;
+};
+
+var getSearchTextInputContainerStyles = function getSearchTextInputContainerStyles(props) {
+  return [/*#__PURE__*/css("display:flex;align-items:center;background-color:", props.isDisabled ? designTokens.backgroundColorForInputWhenDisabled : designTokens.backgroundColorForInput, ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", designTokens.heightForInput, ";box-sizing:border-box;&:hover{border-color:", getInputContainerBorderColor(props, designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundWhenHovered(props), ";}&:focus-within{border-color:", designTokens.borderColorForInputWhenFocused, ";box-shadow:", designTokens.boxShadowForDatetimeInputWhenHovered, " ", designTokens.borderColorForInputWhenFocused, ";&:hover{background-color:", designTokens.colorSurface, ";}}&:focus{border-color:", designTokens.borderColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getSearchTextInputContainerStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1SEsiLCJmaWxlIjoic2VhcmNoLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pbnB1dC11dGlscyc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvciA9IChcbiAgcHJvcHM6IFRJbnB1dFByb3BzLFxuICBkZWZhdWx0Q29sb3I6IHN0cmluZyA9IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0XG4pID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlZmF1bHRDb2xvcjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm94U2hhZG93ID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGdldElucHV0U3R5bGVzKHByb3BzKSxcbiAgY3NzYFxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICYsXG4gICAgJjpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAmOmZvY3VzLFxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgICB9XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRCdXR0b25TdHlsZXMgPSAoKSA9PiBjc3NgXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICBib3JkZXItbGVmdDogbm9uZTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG5gO1xuXG5jb25zdCBnZXRJY29uQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzLCBkZWZhdWx0Q29sb3I6IHN0cmluZykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbldoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdENvbG9yO1xufTtcblxuY29uc3QgZ2V0Q2xlYXJJY29uQnV0dG9uU3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4gW1xuICBnZXRCdXR0b25TdHlsZXMoKSxcbiAgY3NzYFxuICAgIG1hcmdpbi1yaWdodDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luUmlnaHRGb3JDbGVhcklucHV0SWNvbn07XG4gICAgZmlsbDogJHtnZXRJY29uQ29sb3IocHJvcHMsIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgfVxuICBgLFxuXTtcblxuY29uc3QgZ2V0U2VhcmNoSWNvbkJ1dHRvblN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IFtcbiAgZ2V0QnV0dG9uU3R5bGVzKCksXG4gIGNzc2BcbiAgICBtYXJnaW4tcmlnaHQ6ICR7ZGVzaWduVG9rZW5zLm1hcmdpblJpZ2h0Rm9yU2VhcmNoSW5wdXRJY29ufTtcbiAgICBmaWxsOiAke2dldEljb25Db2xvcihwcm9wcywgZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvclNlYXJjaElucHV0SWNvbil9O1xuICAgICY6aG92ZXIge1xuICAgICAgZmlsbDogJHtnZXRJY29uQ29sb3IoXG4gICAgICAgIHByb3BzLFxuICAgICAgICBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yU2VhcmNoSW5wdXRJY29uV2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgIH1cbiAgYCxcbl07XG5cbmNvbnN0IGdldEJhY2tncm91bmRXaGVuSG92ZXJlZCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkhvdmVyZWQ7XG59O1xuXG5jb25zdCBnZXRTZWFyY2hUZXh0SW5wdXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiBbXG4gIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0Rpc2FibGVkXG4gICAgICA/IGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZFxuICAgICAgOiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXR9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0SW5wdXRDb250YWluZXJCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dENvbnRhaW5lckJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRXaGVuSG92ZXJlZChwcm9wcyl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7ZGVzaWduVG9rZW5zLmJveFNoYWRvd0ZvckRhdGV0aW1lSW5wdXRXaGVuSG92ZXJlZH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYCxcbl07XG5cbmV4cG9ydCB7XG4gIGdldFNlYXJjaFRleHRJbnB1dFN0eWxlcyxcbiAgZ2V0U2VhcmNoVGV4dElucHV0Q29udGFpbmVyU3R5bGVzLFxuICBnZXRDbGVhckljb25CdXR0b25TdHlsZXMsXG4gIGdldFNlYXJjaEljb25CdXR0b25TdHlsZXMsXG59O1xuIl19 */")];
+};
+
+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; }
+var defaultProps = {
+  horizontalConstraint: 'scale',
+  isClearable: true
+};
+
+var SearchTextInput = function SearchTextInput(props) {
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'TextInput: `onChange` is required when is not read only.') : void 0;
+  }
+
+  var _useState = useState(props.value || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+
+    if (props.onReset) {
+      props.onReset();
+    }
+  };
+
+  var handleChange = function handleChange(event) {
+    setSearchValue(event.target.value);
+
+    if (props.onChange) {
+      props.onChange(event);
+    }
+  };
+
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+
+    if (props.onSubmit) {
+      props.onSubmit(searchValue);
+    }
+  };
+
+  return jsx(Constraints.Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxs("div", {
+      css: getSearchTextInputContainerStyles(props),
+      children: [jsx("input", _objectSpread({
+        id: props.id,
+        name: props.name,
+        type: "text",
+        value: searchValue,
+        onChange: handleChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        disabled: props.isDisabled,
+        placeholder: props.placeholder,
+        readOnly: props.isReadOnly,
+        autoFocus: props.isAutofocussed,
+        autoComplete: props.autoComplete,
+        "aria-readonly": props.isReadOnly,
+        contentEditable: !props.isReadOnly,
+        "aria-invalid": props['aria-invalid'],
+        "aria-errormessage": props['aria-errormessage'],
+        css: getSearchTextInputStyles(props)
+      }, filterDataAttributes(props))), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsx(SecondaryIconButton, {
+        icon: jsx(CloseIcon, {
+          size: "medium"
+        }),
+        label: 'clear-button',
+        onClick: handleClear,
+        css: getClearIconButtonStyles(props)
+      }), jsx(SecondaryIconButton, {
+        icon: jsx(SearchIcon, {}),
+        label: 'search-button',
+        onClick: handleSubmit,
+        css: getSearchIconButtonStyles(props)
+      })]
+    })
+  });
+};
+
+SearchTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _pt.string,
+  autoComplete: _pt.string,
+  'aria-invalid': _pt.bool,
+  'aria-errormessage': _pt.string,
+  name: _pt.string,
+  value: _pt.string.isRequired,
+  onChange: _pt.func,
+  onBlur: _pt.func,
+  onFocus: _pt.func,
+  onSubmit: _pt.func.isRequired,
+  onReset: _pt.func.isRequired,
+  isAutofocussed: _pt.bool,
+  isDisabled: _pt.bool,
+  isReadOnly: _pt.bool,
+  hasError: _pt.bool,
+  hasWarning: _pt.bool,
+  placeholder: _pt.string,
+  isClearable: _pt.bool,
+  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+SearchTextInput.displayName = 'SearchTextInput';
+SearchTextInput.defaultProps = defaultProps;
+
+SearchTextInput.isEmpty = function (value) {
+  return !value || _trimInstanceProperty(value).call(value).length === 0;
+};
+
+var SearchTextInput$1 = SearchTextInput;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.11.2";
+
+export { SearchTextInput$1 as default, version };

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './search-text-input';
+export { default as version } from './version';

package/dist/declarations/src/search-text-input.d.ts

@@ -0,0 +1,29 @@
+import { type FocusEventHandler, type ChangeEventHandler } from 'react';
+export type TSearchTextInputProps = {
+    id?: string;
+    autoComplete?: string;
+    'aria-invalid'?: boolean;
+    'aria-errormessage'?: string;
+    name?: string;
+    value: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onSubmit: (searchValue: string) => void;
+    onReset: () => void;
+    isAutofocussed?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    hasError?: boolean;
+    hasWarning?: boolean;
+    placeholder?: string;
+    isClearable?: boolean;
+    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+};
+declare const SearchTextInput: {
+    (props: TSearchTextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TSearchTextInputProps, "isClearable" | "horizontalConstraint">;
+    isEmpty(value: TSearchTextInputProps['value']): boolean;
+};
+export default SearchTextInput;

package/dist/declarations/src/search-text-input.styles.d.ts

@@ -0,0 +1,11 @@
+type TInputProps = {
+    isDisabled?: boolean;
+    hasError?: boolean;
+    hasWarning?: boolean;
+    isReadOnly?: boolean;
+};
+declare const getSearchTextInputStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
+declare const getClearIconButtonStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
+declare const getSearchIconButtonStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
+declare const getSearchTextInputContainerStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
+export { getSearchTextInputStyles, getSearchTextInputContainerStyles, getClearIconButtonStyles, getSearchIconButtonStyles, };

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@commercetools-uikit/search-text-input",
+  "description": "A controlled search text input component for single-line strings with validation states.",
+  "version": "0.0.0-canary-20230209162741",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/inputs/search-text-input"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "typescript",
+    "design-system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-search-text-input.cjs.js",
+  "module": "dist/commercetools-uikit-search-text-input.esm.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.19.0",
+    "@babel/runtime-corejs3": "^7.19.1",
+    "@commercetools-uikit/constraints": "0.0.0-canary-20230209162741",
+    "@commercetools-uikit/design-system": "0.0.0-canary-20230209162741",
+    "@commercetools-uikit/icons": "0.0.0-canary-20230209162741",
+    "@commercetools-uikit/input-utils": "0.0.0-canary-20230209162741",
+    "@commercetools-uikit/secondary-icon-button": "0.0.0-canary-20230209162741",
+    "@commercetools-uikit/utils": "0.0.0-canary-20230209162741",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.8.1"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}