@commercetools-uikit/select-utils 19.13.0 → 19.14.0

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

@@ -24,6 +24,7 @@ var reactSelect = require('react-select');
 var react$1 = require('react');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
+var CheckboxInput = require('@commercetools-uikit/checkbox-input');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -39,6 +40,7 @@ var omit__default = /*#__PURE__*/_interopDefault(omit);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
+var CheckboxInput__default = /*#__PURE__*/_interopDefault(CheckboxInput);
 
 var messages$1 = reactIntl.defineMessages({
   clearButtonLabel: {
@@ -49,8 +51,8 @@ var messages$1 = reactIntl.defineMessages({
 });
 
 const _excluded = ["ref", "onMouseDown"];
-function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ClearIndicator = props => {
   const intl = reactIntl.useIntl();
   const getStyles = props.getStyles,
@@ -59,7 +61,7 @@ const ClearIndicator = props => {
     onMouseDown = _props$innerProps.onMouseDown,
     restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
     selectProps = props.selectProps;
-  return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
+  return jsxRuntime.jsx("button", _objectSpread$7(_objectSpread$7({}, restInnerProps), {}, {
     ref: ref,
     css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcbmltcG9ydCB7IFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG50eXBlIFRJbm5lclByb3BzID0ge1xuICByZWY6IExlZ2FjeVJlZjxIVE1MQnV0dG9uRWxlbWVudD47XG59ICYgSlNYLkludHJpbnNpY0VsZW1lbnRzWydidXR0b24nXTtcblxuZXhwb3J0IHR5cGUgVENsZWFySW5kaWNhdG9yUHJvcHMgPSB7XG4gIGlubmVyUHJvcHM6IFRJbm5lclByb3BzO1xufSAmIFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzPENsZWFySW5kaWNhdG9yUHJvcHM+O1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gICAgc2VsZWN0UHJvcHMsXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw0MH07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuY29sb3JFcnJvcn07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9e3NlbGVjdFByb3BzLmlzQ29uZGVuc2VkID8gJ3NtYWxsJyA6ICdtZWRpdW0nfSAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
     style: getStyles('clearIndicator', props),
@@ -79,8 +81,8 @@ const ClearIndicator = props => {
 ClearIndicator.displayName = 'ClearIndicator';
 var ClearIndicator$1 = ClearIndicator;
 
-function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 // see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
 const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
 const TagRemove = props => {
@@ -88,7 +90,7 @@ const TagRemove = props => {
   // when the select input is disabled,
   // we don't want to spread the removeProp event handlers
   const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
-  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$5(_objectSpread$5({
+  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$6(_objectSpread$6({
     label: "Remove"
   }, innerProps), {}, {
     children: jsxRuntime.jsx(icons.CloseBoldIcon, {
@@ -100,9 +102,9 @@ const TagRemove = props => {
 TagRemove.displayName = 'TagRemove';
 var TagRemove$1 = TagRemove;
 
-function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$5(_objectSpread$5({}, props), {}, {
   children: jsxRuntime.jsx(icons.CaretDownIcon, {
     color: props.isDisabled ? 'neutral60' : undefined,
     size: "small"
@@ -111,10 +113,10 @@ const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.Dropdow
 DropdownIndicator.displayName = 'DropdownIndicator';
 var DropdownIndicator$1 = DropdownIndicator;
 
-function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const SearchIconDropdownIndicator = props => {
-  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
     children: jsxRuntime.jsx(icons.SearchIcon, {
       color: 'neutral60',
       size: props.selectProps.isCondensed ? 'medium' : 'big'
@@ -124,8 +126,8 @@ const SearchIconDropdownIndicator = props => {
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
 var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
 
-function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultComponent = type => {
   if (type === 'singleValue') return reactSelect.components.SingleValue;
   if (type === 'placeholder') return reactSelect.components.Placeholder;
@@ -144,17 +146,17 @@ const WrapperWithIcon = props => {
       // the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
       // spacingsXs is the margin between the icon and value
       css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHtcbiAgY29tcG9uZW50cyBhcyBkZWZhdWx0Q29tcG9uZW50cyxcbiAgdHlwZSBTaW5nbGVWYWx1ZVByb3BzLFxuICB0eXBlIFBsYWNlaG9sZGVyUHJvcHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgVFNpbmdsZVZhbHVlV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdzaW5nbGVWYWx1ZSc7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8U2luZ2xlVmFsdWVQcm9wcz47XG5leHBvcnQgdHlwZSBUUGxhY2Vob2xkZXJXcmFwcGVyV2l0aEljb25Qcm9wcyA9IHtcbiAgdHlwZTogJ3BsYWNlaG9sZGVyJztcbn0gJiBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wczxQbGFjZWhvbGRlclByb3BzPjtcbmV4cG9ydCB0eXBlIFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+ID1cbiAgVHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZSdcbiAgICA/IFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHNcbiAgICA6IG5ldmVyO1xuZXhwb3J0IHR5cGUgVERlZmF1bHRDb21wb25lbnQ8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9IChcbiAgcHJvcHM6IFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBTaW5nbGVWYWx1ZVByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gUGxhY2Vob2xkZXJQcm9wc1xuICAgIDogbmV2ZXJcbikgPT4gSlNYLkVsZW1lbnQ7XG5cbmNvbnN0IGdldERlZmF1bHRDb21wb25lbnQgPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgdHlwZTogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+Wyd0eXBlJ11cbik6IFREZWZhdWx0Q29tcG9uZW50PFR5cGU+IHwgbnVsbCA9PiB7XG4gIGlmICh0eXBlID09PSAnc2luZ2xlVmFsdWUnKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5TaW5nbGVWYWx1ZSBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgaWYgKHR5cGUgPT09ICdwbGFjZWhvbGRlcicpXG4gICAgcmV0dXJuIGRlZmF1bHRDb21wb25lbnRzLlBsYWNlaG9sZGVyIGFzIFREZWZhdWx0Q29tcG9uZW50PFR5cGU+O1xuICByZXR1cm4gbnVsbDtcbn07XG5cbmNvbnN0IFdyYXBwZXJXaXRoSWNvbiA9IDxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+KFxuICBwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+XG4pID0+IHtcbiAgY29uc3QgRGVmYXVsdENvbXBvbmVudCA9IGdldERlZmF1bHRDb21wb25lbnQ8VHlwZT4ocHJvcHMudHlwZSk7XG5cbiAgaWYgKCFEZWZhdWx0Q29tcG9uZW50KSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogcHJvcHMuc2VsZWN0UHJvcHMuaXNDb25kZW5zZWQgPyAnbWVkaXVtJyA6ICdiaWcnLFxuICAgICAgICB9KX1cbiAgICAgIDxzcGFuXG4gICAgICAgIC8vIHJlYWN0LXNlbGVjdCB1c2VzIGFic29sdXRlIHBvc2l0aW9uaW5nIGZvciB0aGUgU2luZ2xlVmFsdWUvUGxhY2Vob2xkZXJcbiAgICAgICAgLy8gdGhlIGljb24gaGFzIGEgZml4ZWQgc2l6ZSBvZiAyNHB4ICg9PSBTcGFjaW5nc1hsKSwgdGhlcmVmb3JlIHdlIGNhbiB1c2UgYSBmaXhlZCBtYXJnaW5cbiAgICAgICAgLy8gc3BhY2luZ3NYcyBpcyB0aGUgbWFyZ2luIGJldHdlZW4gdGhlIGljb24gYW5kIHZhbHVlXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7LyogQHRzLWlnbm9yZSAqL31cbiAgICAgICAgPERlZmF1bHRDb21wb25lbnQgey4uLnByb3BzfSAvPlxuICAgICAgPC9zcGFuPlxuICAgIDwvPlxuICApO1xufTtcblxuV3JhcHBlcldpdGhJY29uLmRpc3BsYXlOYW1lID0gJ1dyYXBwZXJXaXRoSWNvbic7XG5cbmV4cG9ydCBkZWZhdWx0IFdyYXBwZXJXaXRoSWNvbjtcblxuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdzaW5nbGVWYWx1ZSc+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwnc2luZ2xlVmFsdWUnPiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczwncGxhY2Vob2xkZXInPikgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb248J3BsYWNlaG9sZGVyJz4gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
-      children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
+      children: jsxRuntime.jsx(DefaultComponent, _objectSpread$3({}, props))
     })]
   });
 };
 WrapperWithIcon.displayName = 'WrapperWithIcon';
 var WrapperWithIcon$1 = WrapperWithIcon;
 const customComponents = {
-  SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
     type: "singleValue"
   })),
-  Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
     type: "placeholder"
   }))
 };
@@ -166,12 +168,12 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
   MULTIPLE_PROPERTIES: 'multiple-properties'
 };
 
-function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const MultiplePropertiesSelectInputOption = props => {
   const data = props.data;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
     children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
@@ -189,7 +191,7 @@ MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInput
 const DoublePropertySelectInputOption = props => {
   const data = props.data;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
     children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
@@ -206,15 +208,15 @@ const CustomSelectInputOption = props => {
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
   switch (props.optionType) {
     case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
-      return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
     case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
-      return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
     default:
-      return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         children: jsxRuntime.jsx(Text__default["default"].Detail, {
           children: props.optionInnerProps.data?.label || noValueFallback
         })
@@ -223,6 +225,54 @@ const CustomSelectInputOption = props => {
 };
 CustomSelectInputOption.displayName = 'CustomSelectInputOption';
 
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const optionStyleCheckboxComponents = appearance => {
+  return {
+    Option: props => {
+      const innerRef = props.innerRef,
+        innerProps = props.innerProps,
+        label = props.label,
+        isDisabled = props.isDisabled,
+        isFocused = props.isFocused,
+        isSelected = props.isSelected,
+        className = props.className,
+        data = props.data;
+      return jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
+        "data-component": "option",
+        ref: innerRef
+      }, innerProps), {}, {
+        css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && `background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
+        className: className,
+        "aria-disabled": isDisabled,
+        children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
+          isDisabled: isDisabled,
+          isChecked: isSelected,
+          onChange: () => {},
+          children: jsxRuntime.jsx("span", {
+            children: label
+          })
+        }), appearance === 'filter' && jsxRuntime.jsx("div", {
+          css: /*#__PURE__*/react.css("display:flex;align-items:center;font-weight:400;line-height:", designSystem.designTokens.lineHeight05, ";color:", designSystem.designTokens.colorNeutral50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNERzQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
+          children: data.count
+        })]
+      }));
+    }
+  };
+};
+
+/**
+ * Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
+ */
+const optionsStyleCheckboxSelectProps = () => {
+  return {
+    // selected options should still be visible in the option-list, otherwise you cant toggle them
+    hideSelectedOptions: false,
+    // don't close the menu on check / uncheck of a checkbox
+    closeMenuOnSelect: false
+  };
+};
+
 var messages = reactIntl.defineMessages({
   createLabel: {
     id: 'UIKit.CreatableSelectInput.createLabel',
@@ -244,6 +294,11 @@ var messages = reactIntl.defineMessages({
     description: 'Default input placeholder text',
     defaultMessage: 'Select...'
   },
+  selectInputAsFilterPlaceholder: {
+    id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
+    description: 'Default input placeholder text when used as filter',
+    defaultMessage: 'Search'
+  },
   loadingOptions: {
     id: 'UIKit.SelectInput.loadingOptions',
     description: 'Default input loading text',
@@ -372,7 +427,7 @@ const menuStyles = props => base => {
     border: `1px solid ${designSystem.designTokens.colorSurface}`,
     borderRadius: designSystem.designTokens.borderRadiusForInput,
     backgroundColor: designSystem.designTokens.backgroundColorForInput,
-    boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
+    boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
     fontSize: designSystem.designTokens.fontSize30,
     fontFamily: 'inherit',
     margin: `${designSystem.designTokens.spacing10} 0 0 0`,
@@ -434,6 +489,7 @@ const optionStyles = props => (base, state) => {
       if (state.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
       return designSystem.designTokens.fontColorForInput;
     })(),
+    borderRadius: props.appearance === 'filter' && '4px',
     backgroundColor: (() => {
       if (state.isSelected) return designSystem.designTokens.colorPrimary95;
       if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
@@ -467,6 +523,19 @@ const placeholderStyles = props => base => {
     fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
   });
 };
+const getInputValueLayout = props => {
+  switch (true) {
+    case props.appearance === 'filter':
+      return 'grid';
+    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
+    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
+    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
+    case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
+      return 'flex';
+    default:
+      return 'grid';
+  }
+};
 const valueContainerStyles = props => base => {
   return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
     flexWrap: 'nowrap'
@@ -474,10 +543,7 @@ const valueContainerStyles = props => base => {
     padding: '0',
     backgroundColor: 'none',
     overflow: 'hidden',
-    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
-    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
-    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
+    display: getInputValueLayout(props),
     fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
   });
 };
@@ -617,7 +683,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.13.0";
+var version = "19.14.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;
@@ -631,5 +697,7 @@ exports.ValueWrapperWithIcon = WrapperWithIcon$1;
 exports.createSelectStyles = createSelectStyles;
 exports.customComponentsWithIcons = customComponents;
 exports.messages = messages;
+exports.optionStyleCheckboxComponents = optionStyleCheckboxComponents;
+exports.optionsStyleCheckboxSelectProps = optionsStyleCheckboxSelectProps;
 exports.version = version;
 exports.warnIfMenuPortalPropsAreMissing = warnIfMenuPortalPropsAreMissing;

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

@@ -24,6 +24,7 @@ var reactSelect = require('react-select');
 var react$1 = require('react');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
+var CheckboxInput = require('@commercetools-uikit/checkbox-input');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -39,6 +40,7 @@ var omit__default = /*#__PURE__*/_interopDefault(omit);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
+var CheckboxInput__default = /*#__PURE__*/_interopDefault(CheckboxInput);
 
 var messages$1 = reactIntl.defineMessages({
   clearButtonLabel: {
@@ -49,8 +51,8 @@ var messages$1 = reactIntl.defineMessages({
 });
 
 const _excluded = ["ref", "onMouseDown"];
-function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ClearIndicator = props => {
   const intl = reactIntl.useIntl();
   const getStyles = props.getStyles,
@@ -59,7 +61,7 @@ const ClearIndicator = props => {
     onMouseDown = _props$innerProps.onMouseDown,
     restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
     selectProps = props.selectProps;
-  return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
+  return jsxRuntime.jsx("button", _objectSpread$7(_objectSpread$7({}, restInnerProps), {}, {
     ref: ref,
     css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + ("" ), "" ),
     style: getStyles('clearIndicator', props),
@@ -79,8 +81,8 @@ const ClearIndicator = props => {
 ClearIndicator.displayName = 'ClearIndicator';
 var ClearIndicator$1 = ClearIndicator;
 
-function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 // see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
 const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
 const TagRemove = props => {
@@ -88,7 +90,7 @@ const TagRemove = props => {
   // when the select input is disabled,
   // we don't want to spread the removeProp event handlers
   const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
-  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$5(_objectSpread$5({
+  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$6(_objectSpread$6({
     label: "Remove"
   }, innerProps), {}, {
     children: jsxRuntime.jsx(icons.CloseBoldIcon, {
@@ -100,9 +102,9 @@ const TagRemove = props => {
 TagRemove.displayName = 'TagRemove';
 var TagRemove$1 = TagRemove;
 
-function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$5(_objectSpread$5({}, props), {}, {
   children: jsxRuntime.jsx(icons.CaretDownIcon, {
     color: props.isDisabled ? 'neutral60' : undefined,
     size: "small"
@@ -111,10 +113,10 @@ const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.Dropdow
 DropdownIndicator.displayName = 'DropdownIndicator';
 var DropdownIndicator$1 = DropdownIndicator;
 
-function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const SearchIconDropdownIndicator = props => {
-  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
     children: jsxRuntime.jsx(icons.SearchIcon, {
       color: 'neutral60',
       size: props.selectProps.isCondensed ? 'medium' : 'big'
@@ -124,8 +126,8 @@ const SearchIconDropdownIndicator = props => {
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
 var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
 
-function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultComponent = type => {
   if (type === 'singleValue') return reactSelect.components.SingleValue;
   if (type === 'placeholder') return reactSelect.components.Placeholder;
@@ -144,17 +146,17 @@ const WrapperWithIcon = props => {
       // the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
       // spacingsXs is the margin between the icon and value
       css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacing20, ";" + ("" ), "" ),
-      children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
+      children: jsxRuntime.jsx(DefaultComponent, _objectSpread$3({}, props))
     })]
   });
 };
 WrapperWithIcon.displayName = 'WrapperWithIcon';
 var WrapperWithIcon$1 = WrapperWithIcon;
 const customComponents = {
-  SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
     type: "singleValue"
   })),
-  Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
     type: "placeholder"
   }))
 };
@@ -166,12 +168,12 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
   MULTIPLE_PROPERTIES: 'multiple-properties'
 };
 
-function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const MultiplePropertiesSelectInputOption = props => {
   const data = props.data;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
     children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
@@ -189,7 +191,7 @@ MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInput
 const DoublePropertySelectInputOption = props => {
   const data = props.data;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
     children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
       scale: "xs",
       children: [jsxRuntime.jsx(Text__default["default"].Detail, {
@@ -206,15 +208,15 @@ const CustomSelectInputOption = props => {
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
   switch (props.optionType) {
     case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
-      return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
     case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
-      return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
     default:
-      return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         children: jsxRuntime.jsx(Text__default["default"].Detail, {
           children: props.optionInnerProps.data?.label || noValueFallback
         })
@@ -223,6 +225,54 @@ const CustomSelectInputOption = props => {
 };
 CustomSelectInputOption.displayName = 'CustomSelectInputOption';
 
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const optionStyleCheckboxComponents = appearance => {
+  return {
+    Option: props => {
+      const innerRef = props.innerRef,
+        innerProps = props.innerProps,
+        label = props.label,
+        isDisabled = props.isDisabled,
+        isFocused = props.isFocused,
+        isSelected = props.isSelected,
+        className = props.className,
+        data = props.data;
+      return jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
+        "data-component": "option",
+        ref: innerRef
+      }, innerProps), {}, {
+        css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && `background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + ("" ), "" ),
+        className: className,
+        "aria-disabled": isDisabled,
+        children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
+          isDisabled: isDisabled,
+          isChecked: isSelected,
+          onChange: () => {},
+          children: jsxRuntime.jsx("span", {
+            children: label
+          })
+        }), appearance === 'filter' && jsxRuntime.jsx("div", {
+          css: /*#__PURE__*/react.css("display:flex;align-items:center;font-weight:400;line-height:", designSystem.designTokens.lineHeight05, ";color:", designSystem.designTokens.colorNeutral50, ";" + ("" ), "" ),
+          children: data.count
+        })]
+      }));
+    }
+  };
+};
+
+/**
+ * Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
+ */
+const optionsStyleCheckboxSelectProps = () => {
+  return {
+    // selected options should still be visible in the option-list, otherwise you cant toggle them
+    hideSelectedOptions: false,
+    // don't close the menu on check / uncheck of a checkbox
+    closeMenuOnSelect: false
+  };
+};
+
 var messages = reactIntl.defineMessages({
   createLabel: {
     id: 'UIKit.CreatableSelectInput.createLabel',
@@ -244,6 +294,11 @@ var messages = reactIntl.defineMessages({
     description: 'Default input placeholder text',
     defaultMessage: 'Select...'
   },
+  selectInputAsFilterPlaceholder: {
+    id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
+    description: 'Default input placeholder text when used as filter',
+    defaultMessage: 'Search'
+  },
   loadingOptions: {
     id: 'UIKit.SelectInput.loadingOptions',
     description: 'Default input loading text',
@@ -372,7 +427,7 @@ const menuStyles = props => base => {
     border: `1px solid ${designSystem.designTokens.colorSurface}`,
     borderRadius: designSystem.designTokens.borderRadiusForInput,
     backgroundColor: designSystem.designTokens.backgroundColorForInput,
-    boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
+    boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
     fontSize: designSystem.designTokens.fontSize30,
     fontFamily: 'inherit',
     margin: `${designSystem.designTokens.spacing10} 0 0 0`,
@@ -434,6 +489,7 @@ const optionStyles = props => (base, state) => {
       if (state.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
       return designSystem.designTokens.fontColorForInput;
     })(),
+    borderRadius: props.appearance === 'filter' && '4px',
     backgroundColor: (() => {
       if (state.isSelected) return designSystem.designTokens.colorPrimary95;
       if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
@@ -467,6 +523,19 @@ const placeholderStyles = props => base => {
     fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
   });
 };
+const getInputValueLayout = props => {
+  switch (true) {
+    case props.appearance === 'filter':
+      return 'grid';
+    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
+    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
+    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
+    case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
+      return 'flex';
+    default:
+      return 'grid';
+  }
+};
 const valueContainerStyles = props => base => {
   return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
     flexWrap: 'nowrap'
@@ -474,10 +543,7 @@ const valueContainerStyles = props => base => {
     padding: '0',
     backgroundColor: 'none',
     overflow: 'hidden',
-    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
-    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
-    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
+    display: getInputValueLayout(props),
     fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
   });
 };
@@ -614,7 +680,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.13.0";
+var version = "19.14.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;
@@ -628,5 +694,7 @@ exports.ValueWrapperWithIcon = WrapperWithIcon$1;
 exports.createSelectStyles = createSelectStyles;
 exports.customComponentsWithIcons = customComponents;
 exports.messages = messages;
+exports.optionStyleCheckboxComponents = optionStyleCheckboxComponents;
+exports.optionsStyleCheckboxSelectProps = optionsStyleCheckboxSelectProps;
 exports.version = version;
 exports.warnIfMenuPortalPropsAreMissing = warnIfMenuPortalPropsAreMissing;

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

@@ -20,6 +20,7 @@ import { components } from 'react-select';
 import { cloneElement } from 'react';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
+import CheckboxInput from '@commercetools-uikit/checkbox-input';
 
 var messages$1 = defineMessages({
   clearButtonLabel: {
@@ -30,8 +31,8 @@ var messages$1 = defineMessages({
 });
 
 const _excluded = ["ref", "onMouseDown"];
-function ownKeys$6(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const ClearIndicator = props => {
   const intl = useIntl();
   const getStyles = props.getStyles,
@@ -40,7 +41,7 @@ const ClearIndicator = props => {
     onMouseDown = _props$innerProps.onMouseDown,
     restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
     selectProps = props.selectProps;
-  return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
+  return jsx("button", _objectSpread$7(_objectSpread$7({}, restInnerProps), {}, {
     ref: ref,
     css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.colorNeutral40, ";:hover svg *{fill:", designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcbmltcG9ydCB7IFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG50eXBlIFRJbm5lclByb3BzID0ge1xuICByZWY6IExlZ2FjeVJlZjxIVE1MQnV0dG9uRWxlbWVudD47XG59ICYgSlNYLkludHJpbnNpY0VsZW1lbnRzWydidXR0b24nXTtcblxuZXhwb3J0IHR5cGUgVENsZWFySW5kaWNhdG9yUHJvcHMgPSB7XG4gIGlubmVyUHJvcHM6IFRJbm5lclByb3BzO1xufSAmIFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzPENsZWFySW5kaWNhdG9yUHJvcHM+O1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gICAgc2VsZWN0UHJvcHMsXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw0MH07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuY29sb3JFcnJvcn07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9e3NlbGVjdFByb3BzLmlzQ29uZGVuc2VkID8gJ3NtYWxsJyA6ICdtZWRpdW0nfSAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
     style: getStyles('clearIndicator', props),
@@ -60,8 +61,8 @@ const ClearIndicator = props => {
 ClearIndicator.displayName = 'ClearIndicator';
 var ClearIndicator$1 = ClearIndicator;
 
-function ownKeys$5(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 // see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
 const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
 const TagRemove = props => {
@@ -69,7 +70,7 @@ const TagRemove = props => {
   // when the select input is disabled,
   // we don't want to spread the removeProp event handlers
   const innerProps = isDisabled ? omit(props.innerProps, removeProps) : props.innerProps;
-  return jsx(AccessibleButton, _objectSpread$5(_objectSpread$5({
+  return jsx(AccessibleButton, _objectSpread$6(_objectSpread$6({
     label: "Remove"
   }, innerProps), {}, {
     children: jsx(CloseBoldIcon, {
@@ -81,9 +82,9 @@ const TagRemove = props => {
 TagRemove.displayName = 'TagRemove';
 var TagRemove$1 = TagRemove;
 
-function ownKeys$4(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-const DropdownIndicator = props => jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+function ownKeys$5(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+const DropdownIndicator = props => jsx(components.DropdownIndicator, _objectSpread$5(_objectSpread$5({}, props), {}, {
   children: jsx(CaretDownIcon, {
     color: props.isDisabled ? 'neutral60' : undefined,
     size: "small"
@@ -92,10 +93,10 @@ const DropdownIndicator = props => jsx(components.DropdownIndicator, _objectSpre
 DropdownIndicator.displayName = 'DropdownIndicator';
 var DropdownIndicator$1 = DropdownIndicator;
 
-function ownKeys$3(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const SearchIconDropdownIndicator = props => {
-  return jsx(components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
     children: jsx(SearchIcon, {
       color: 'neutral60',
       size: props.selectProps.isCondensed ? 'medium' : 'big'
@@ -105,8 +106,8 @@ const SearchIconDropdownIndicator = props => {
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
 var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
 
-function ownKeys$2(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const getDefaultComponent = type => {
   if (type === 'singleValue') return components.SingleValue;
   if (type === 'placeholder') return components.Placeholder;
@@ -125,17 +126,17 @@ const WrapperWithIcon = props => {
       // the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
       // spacingsXs is the margin between the icon and value
       css: /*#__PURE__*/css("margin-left:", designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHtcbiAgY29tcG9uZW50cyBhcyBkZWZhdWx0Q29tcG9uZW50cyxcbiAgdHlwZSBTaW5nbGVWYWx1ZVByb3BzLFxuICB0eXBlIFBsYWNlaG9sZGVyUHJvcHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgVFNpbmdsZVZhbHVlV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdzaW5nbGVWYWx1ZSc7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8U2luZ2xlVmFsdWVQcm9wcz47XG5leHBvcnQgdHlwZSBUUGxhY2Vob2xkZXJXcmFwcGVyV2l0aEljb25Qcm9wcyA9IHtcbiAgdHlwZTogJ3BsYWNlaG9sZGVyJztcbn0gJiBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wczxQbGFjZWhvbGRlclByb3BzPjtcbmV4cG9ydCB0eXBlIFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+ID1cbiAgVHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZSdcbiAgICA/IFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHNcbiAgICA6IG5ldmVyO1xuZXhwb3J0IHR5cGUgVERlZmF1bHRDb21wb25lbnQ8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9IChcbiAgcHJvcHM6IFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBTaW5nbGVWYWx1ZVByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gUGxhY2Vob2xkZXJQcm9wc1xuICAgIDogbmV2ZXJcbikgPT4gSlNYLkVsZW1lbnQ7XG5cbmNvbnN0IGdldERlZmF1bHRDb21wb25lbnQgPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgdHlwZTogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+Wyd0eXBlJ11cbik6IFREZWZhdWx0Q29tcG9uZW50PFR5cGU+IHwgbnVsbCA9PiB7XG4gIGlmICh0eXBlID09PSAnc2luZ2xlVmFsdWUnKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5TaW5nbGVWYWx1ZSBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgaWYgKHR5cGUgPT09ICdwbGFjZWhvbGRlcicpXG4gICAgcmV0dXJuIGRlZmF1bHRDb21wb25lbnRzLlBsYWNlaG9sZGVyIGFzIFREZWZhdWx0Q29tcG9uZW50PFR5cGU+O1xuICByZXR1cm4gbnVsbDtcbn07XG5cbmNvbnN0IFdyYXBwZXJXaXRoSWNvbiA9IDxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+KFxuICBwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+XG4pID0+IHtcbiAgY29uc3QgRGVmYXVsdENvbXBvbmVudCA9IGdldERlZmF1bHRDb21wb25lbnQ8VHlwZT4ocHJvcHMudHlwZSk7XG5cbiAgaWYgKCFEZWZhdWx0Q29tcG9uZW50KSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogcHJvcHMuc2VsZWN0UHJvcHMuaXNDb25kZW5zZWQgPyAnbWVkaXVtJyA6ICdiaWcnLFxuICAgICAgICB9KX1cbiAgICAgIDxzcGFuXG4gICAgICAgIC8vIHJlYWN0LXNlbGVjdCB1c2VzIGFic29sdXRlIHBvc2l0aW9uaW5nIGZvciB0aGUgU2luZ2xlVmFsdWUvUGxhY2Vob2xkZXJcbiAgICAgICAgLy8gdGhlIGljb24gaGFzIGEgZml4ZWQgc2l6ZSBvZiAyNHB4ICg9PSBTcGFjaW5nc1hsKSwgdGhlcmVmb3JlIHdlIGNhbiB1c2UgYSBmaXhlZCBtYXJnaW5cbiAgICAgICAgLy8gc3BhY2luZ3NYcyBpcyB0aGUgbWFyZ2luIGJldHdlZW4gdGhlIGljb24gYW5kIHZhbHVlXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7LyogQHRzLWlnbm9yZSAqL31cbiAgICAgICAgPERlZmF1bHRDb21wb25lbnQgey4uLnByb3BzfSAvPlxuICAgICAgPC9zcGFuPlxuICAgIDwvPlxuICApO1xufTtcblxuV3JhcHBlcldpdGhJY29uLmRpc3BsYXlOYW1lID0gJ1dyYXBwZXJXaXRoSWNvbic7XG5cbmV4cG9ydCBkZWZhdWx0IFdyYXBwZXJXaXRoSWNvbjtcblxuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdzaW5nbGVWYWx1ZSc+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwnc2luZ2xlVmFsdWUnPiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczwncGxhY2Vob2xkZXInPikgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb248J3BsYWNlaG9sZGVyJz4gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
-      children: jsx(DefaultComponent, _objectSpread$2({}, props))
+      children: jsx(DefaultComponent, _objectSpread$3({}, props))
     })]
   });
 };
 WrapperWithIcon.displayName = 'WrapperWithIcon';
 var WrapperWithIcon$1 = WrapperWithIcon;
 const customComponents = {
-  SingleValue: props => jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  SingleValue: props => jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
     type: "singleValue"
   })),
-  Placeholder: props => jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  Placeholder: props => jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
     type: "placeholder"
   }))
 };
@@ -147,12 +148,12 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
   MULTIPLE_PROPERTIES: 'multiple-properties'
 };
 
-function ownKeys$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const MultiplePropertiesSelectInputOption = props => {
   const data = props.data;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
     children: jsxs(Spacings.Stack, {
       scale: "xs",
       children: [jsx(Text.Detail, {
@@ -170,7 +171,7 @@ MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInput
 const DoublePropertySelectInputOption = props => {
   const data = props.data;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
     children: jsxs(Spacings.Stack, {
       scale: "xs",
       children: [jsx(Text.Detail, {
@@ -187,15 +188,15 @@ const CustomSelectInputOption = props => {
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
   switch (props.optionType) {
     case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
-      return jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsx(MultiplePropertiesSelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
     case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
-      return jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsx(DoublePropertySelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
     default:
-      return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+      return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
         children: jsx(Text.Detail, {
           children: props.optionInnerProps.data?.label || noValueFallback
         })
@@ -204,6 +205,54 @@ const CustomSelectInputOption = props => {
 };
 CustomSelectInputOption.displayName = 'CustomSelectInputOption';
 
+function ownKeys$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+const optionStyleCheckboxComponents = appearance => {
+  return {
+    Option: props => {
+      const innerRef = props.innerRef,
+        innerProps = props.innerProps,
+        label = props.label,
+        isDisabled = props.isDisabled,
+        isFocused = props.isFocused,
+        isSelected = props.isSelected,
+        className = props.className,
+        data = props.data;
+      return jsxs("div", _objectSpread$1(_objectSpread$1({
+        "data-component": "option",
+        ref: innerRef
+      }, innerProps), {}, {
+        css: /*#__PURE__*/css("padding:", designTokens.spacing10, " ", designTokens.spacing20, ";", isFocused && `background-color: ${designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designTokens.fontSize20, ";span{font-size:", designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
+        className: className,
+        "aria-disabled": isDisabled,
+        children: [jsx(CheckboxInput, {
+          isDisabled: isDisabled,
+          isChecked: isSelected,
+          onChange: () => {},
+          children: jsx("span", {
+            children: label
+          })
+        }), appearance === 'filter' && jsx("div", {
+          css: /*#__PURE__*/css("display:flex;align-items:center;font-weight:400;line-height:", designTokens.lineHeight05, ";color:", designTokens.colorNeutral50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNERzQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
+          children: data.count
+        })]
+      }));
+    }
+  };
+};
+
+/**
+ * Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
+ */
+const optionsStyleCheckboxSelectProps = () => {
+  return {
+    // selected options should still be visible in the option-list, otherwise you cant toggle them
+    hideSelectedOptions: false,
+    // don't close the menu on check / uncheck of a checkbox
+    closeMenuOnSelect: false
+  };
+};
+
 var messages = defineMessages({
   createLabel: {
     id: 'UIKit.CreatableSelectInput.createLabel',
@@ -225,6 +274,11 @@ var messages = defineMessages({
     description: 'Default input placeholder text',
     defaultMessage: 'Select...'
   },
+  selectInputAsFilterPlaceholder: {
+    id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
+    description: 'Default input placeholder text when used as filter',
+    defaultMessage: 'Search'
+  },
   loadingOptions: {
     id: 'UIKit.SelectInput.loadingOptions',
     description: 'Default input loading text',
@@ -353,7 +407,7 @@ const menuStyles = props => base => {
     border: `1px solid ${designTokens.colorSurface}`,
     borderRadius: designTokens.borderRadiusForInput,
     backgroundColor: designTokens.backgroundColorForInput,
-    boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
+    boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
     fontSize: designTokens.fontSize30,
     fontFamily: 'inherit',
     margin: `${designTokens.spacing10} 0 0 0`,
@@ -415,6 +469,7 @@ const optionStyles = props => (base, state) => {
       if (state.isDisabled) return designTokens.fontColorForInputWhenDisabled;
       return designTokens.fontColorForInput;
     })(),
+    borderRadius: props.appearance === 'filter' && '4px',
     backgroundColor: (() => {
       if (state.isSelected) return designTokens.colorPrimary95;
       if (state.isFocused) return designTokens.backgroundColorForInputWhenHovered;
@@ -448,6 +503,19 @@ const placeholderStyles = props => base => {
     fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
   });
 };
+const getInputValueLayout = props => {
+  switch (true) {
+    case props.appearance === 'filter':
+      return 'grid';
+    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
+    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
+    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
+    case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
+      return 'flex';
+    default:
+      return 'grid';
+  }
+};
 const valueContainerStyles = props => base => {
   return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
     flexWrap: 'nowrap'
@@ -455,10 +523,7 @@ const valueContainerStyles = props => base => {
     padding: '0',
     backgroundColor: 'none',
     overflow: 'hidden',
-    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
-    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
-    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
+    display: getInputValueLayout(props),
     fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60
   });
 };
@@ -598,6 +663,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.13.0";
+var version = "19.14.0";
 
-export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };
+export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, optionStyleCheckboxComponents, optionsStyleCheckboxSelectProps, version, warnIfMenuPortalPropsAreMissing };

package/dist/declarations/src/create-select-styles.d.ts

@@ -11,7 +11,7 @@ type TProps = {
     hasValue?: boolean;
     isCondensed?: boolean;
     controlShouldRenderValue?: boolean;
-    appearance?: 'default' | 'quiet';
+    appearance?: 'default' | 'quiet' | 'filter';
     minMenuWidth?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
     maxMenuWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
@@ -212,6 +212,7 @@ export default function createSelectStyles(props: TProps): {
         fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
         cursor: string;
         color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
+        borderRadius: string | false;
         backgroundColor: string | undefined;
         '&:active': {
             backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--color-transparent, transparent)";

package/dist/declarations/src/custom-styled-select-options/index.d.ts

@@ -1,2 +1,3 @@
 export { SELECT_DROPDOWN_OPTION_TYPES } from "./constants.js";
 export * from "./custom-styled-select-options.js";
+export * from "./options-style-checkbox-components.js";

package/dist/declarations/src/custom-styled-select-options/options-style-checkbox-components.d.ts

@@ -0,0 +1,10 @@
+import { type Props as ReactSelectProps } from 'react-select';
+import type { TSelectInputProps } from '@commercetools-uikit/select-input';
+export declare const optionStyleCheckboxComponents: (appearance: TSelectInputProps["appearance"]) => ReactSelectProps["components"];
+/**
+ * Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
+ */
+export declare const optionsStyleCheckboxSelectProps: () => {
+    hideSelectedOptions: boolean;
+    closeMenuOnSelect: boolean;
+};

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

@@ -19,6 +19,11 @@ declare const _default: {
         description: string;
         defaultMessage: string;
     };
+    selectInputAsFilterPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     loadingOptions: {
         id: string;
         description: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "19.13.0",
+  "version": "19.14.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,12 +21,13 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "19.13.0",
-    "@commercetools-uikit/design-system": "19.13.0",
-    "@commercetools-uikit/icons": "19.13.0",
-    "@commercetools-uikit/spacings": "19.13.0",
-    "@commercetools-uikit/text": "19.13.0",
-    "@commercetools-uikit/utils": "19.13.0",
+    "@commercetools-uikit/accessible-button": "19.14.0",
+    "@commercetools-uikit/checkbox-input": "workspace:^",
+    "@commercetools-uikit/design-system": "19.14.0",
+    "@commercetools-uikit/icons": "19.14.0",
+    "@commercetools-uikit/spacings": "19.14.0",
+    "@commercetools-uikit/text": "19.14.0",
+    "@commercetools-uikit/utils": "19.14.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",