@commercetools-uikit/select-utils 20.2.3 → 20.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-select-utils.cjs.dev.js +79 -52
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +78 -51
  3. package/dist/commercetools-uikit-select-utils.esm.js +78 -52
  4. package/package.json +11 -11
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -12,6 +12,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
12
12
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
13
13
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
14
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
15
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
15
16
  var designSystem = require('@commercetools-uikit/design-system');
16
17
  var utils = require('@commercetools-uikit/utils');
17
18
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -36,6 +37,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
37
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
38
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
39
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
40
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
39
41
  var omit__default = /*#__PURE__*/_interopDefault(omit);
40
42
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
41
43
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -44,9 +46,11 @@ var CheckboxInput__default = /*#__PURE__*/_interopDefault(CheckboxInput);
44
46
 
45
47
  var messages$1 = reactIntl.defineMessages({
46
48
  clearButtonLabel: {
47
- id: 'UIKit.ClearButton.clearButtonLabel',
48
- description: 'Label for the clear button',
49
- defaultMessage: 'Clear'
49
+ id: "UIKit.ClearButton.clearButtonLabel",
50
+ defaultMessage: [{
51
+ "type": 0,
52
+ "value": "Clear"
53
+ }]
50
54
  }
51
55
  });
52
56
 
@@ -178,11 +182,11 @@ const MultiplePropertiesSelectInputOption = props => {
178
182
  scale: "xs",
179
183
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
180
184
  fontWeight: "bold",
181
- children: data?.label || noValueFallback
185
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
182
186
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
183
- children: ["Key: ", data?.key || noValueFallback]
187
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
184
188
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
185
- children: ["ID: ", data?.id || noValueFallback]
189
+ children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
186
190
  })]
187
191
  })
188
192
  }));
@@ -196,15 +200,16 @@ const DoublePropertySelectInputOption = props => {
196
200
  scale: "xs",
197
201
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
198
202
  fontWeight: "bold",
199
- children: data?.label || noValueFallback
203
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
200
204
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
201
- children: ["Key: ", data?.key || noValueFallback]
205
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
202
206
  })]
203
207
  })
204
208
  }));
205
209
  };
206
210
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
207
211
  const CustomSelectInputOption = props => {
212
+ var _props$optionInnerPro;
208
213
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
209
214
  switch (props.optionType) {
210
215
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -218,7 +223,7 @@ const CustomSelectInputOption = props => {
218
223
  default:
219
224
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
220
225
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
221
- children: props.optionInnerProps.data?.label || noValueFallback
226
+ children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
222
227
  })
223
228
  }));
224
229
  }
@@ -242,7 +247,7 @@ const optionStyleCheckboxComponents = appearance => {
242
247
  "data-component": "option",
243
248
  ref: innerRef
244
249
  }, innerProps), {}, {
245
- 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== */"),
250
+ css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && "background-color: ".concat(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== */"),
246
251
  className: className,
247
252
  "aria-disabled": isDisabled,
248
253
  children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
@@ -275,45 +280,63 @@ const optionsStyleCheckboxSelectProps = () => {
275
280
 
276
281
  var messages = reactIntl.defineMessages({
277
282
  createLabel: {
278
- id: 'UIKit.CreatableSelectInput.createLabel',
279
- description: 'Text of dropdown when creating option',
280
- defaultMessage: 'Create "{inputValue}"'
283
+ id: "UIKit.CreatableSelectInput.createLabel",
284
+ defaultMessage: [{
285
+ "type": 0,
286
+ "value": "Create \""
287
+ }, {
288
+ "type": 1,
289
+ "value": "inputValue"
290
+ }, {
291
+ "type": 0,
292
+ "value": "\""
293
+ }]
281
294
  },
282
295
  noOptionsMessageWithInputValue: {
283
- id: 'UIKit.SelectInput.noOptionsMessageWithInputValue',
284
- description: 'Text of dropdown when no options match search text',
285
- defaultMessage: 'No options'
296
+ id: "UIKit.SelectInput.noOptionsMessageWithInputValue",
297
+ defaultMessage: [{
298
+ "type": 0,
299
+ "value": "No options"
300
+ }]
286
301
  },
287
302
  noOptionsMessageWithoutInputValue: {
288
- id: 'UIKit.SelectInput.noOptionsMessageWithoutInputValue',
289
- description: 'Text of dropdown when no options exist',
290
- defaultMessage: 'No options'
303
+ id: "UIKit.SelectInput.noOptionsMessageWithoutInputValue",
304
+ defaultMessage: [{
305
+ "type": 0,
306
+ "value": "No options"
307
+ }]
291
308
  },
292
309
  placeholder: {
293
- id: 'UIKit.SelectInput.placeholder',
294
- description: 'Default input placeholder text',
295
- defaultMessage: 'Select...'
310
+ id: "UIKit.SelectInput.placeholder",
311
+ defaultMessage: [{
312
+ "type": 0,
313
+ "value": "Select..."
314
+ }]
296
315
  },
297
316
  selectInputAsFilterPlaceholder: {
298
- id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
299
- description: 'Default input placeholder text when used as filter',
300
- defaultMessage: 'Search'
317
+ id: "UIKit.SelectInput.selectInputAsFilterPlaceholder",
318
+ defaultMessage: [{
319
+ "type": 0,
320
+ "value": "Search"
321
+ }]
301
322
  },
302
323
  loadingOptions: {
303
- id: 'UIKit.SelectInput.loadingOptions',
304
- description: 'Default input loading text',
305
- defaultMessage: 'Loading...'
324
+ id: "UIKit.SelectInput.loadingOptions",
325
+ defaultMessage: [{
326
+ "type": 0,
327
+ "value": "Loading..."
328
+ }]
306
329
  }
307
330
  });
308
331
 
309
332
  function ownKeys(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; }
310
- function _objectSpread(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(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(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
333
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
311
334
  const getHorizontalConstraintValue = value => {
312
335
  switch (value) {
313
336
  case 'auto':
314
337
  return 'initial';
315
338
  default:
316
- return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
339
+ return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
317
340
  }
318
341
  };
319
342
  const getInputBackgroundColor = props => {
@@ -383,6 +406,7 @@ const getHoverInputBackgroundColor = props => {
383
406
  return null;
384
407
  };
385
408
  const controlStyles = props => (base, state) => {
409
+ var _context;
386
410
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
387
411
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
388
412
  backgroundColor: getInputBackgroundColor(props),
@@ -400,9 +424,8 @@ const controlStyles = props => (base, state) => {
400
424
  if (props.isReadOnly) return 'default';
401
425
  return 'pointer';
402
426
  })(),
403
- padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
404
- transition: `border-color ${designSystem.designTokens.transitionStandard},
405
- box-shadow ${designSystem.designTokens.transitionStandard}`,
427
+ padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
428
+ transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
406
429
  outline: 0,
407
430
  boxShadow: 'none'
408
431
  }, props.horizontalConstraint === 'auto' ? {
@@ -427,13 +450,13 @@ const menuStyles = props => base => {
427
450
  position: 'inherit',
428
451
  zIndex: 'inherit'
429
452
  } : {}), {}, {
430
- border: `1px solid ${designSystem.designTokens.colorSurface}`,
453
+ border: "1px solid ".concat(designSystem.designTokens.colorSurface),
431
454
  borderRadius: designSystem.designTokens.borderRadiusForInput,
432
455
  backgroundColor: designSystem.designTokens.backgroundColorForInput,
433
456
  boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
434
457
  fontSize: designSystem.designTokens.fontSize30,
435
458
  fontFamily: 'inherit',
436
- margin: `${designSystem.designTokens.spacing10} 0 0 0`,
459
+ margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
437
460
  borderColor: (() => {
438
461
  if (props.hasError || props.hasWarning) {
439
462
  return designSystem.designTokens.colorSurface;
@@ -474,17 +497,16 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
474
497
  });
475
498
  const menuListStyles = () => base => {
476
499
  return _objectSpread(_objectSpread({}, base), {}, {
477
- padding: `${designSystem.designTokens.spacing10} 0`,
500
+ padding: "".concat(designSystem.designTokens.spacing10, " 0"),
478
501
  borderRadius: designSystem.designTokens.borderRadiusForInput,
479
502
  backgroundColor: designSystem.designTokens.backgroundColorForInput
480
503
  });
481
504
  };
482
505
  const optionStyles = props => (base, state) => {
506
+ var _context2, _context3, _context4;
483
507
  return _objectSpread(_objectSpread({}, base), {}, {
484
- transition: `border-color ${designSystem.designTokens.transitionStandard},
485
- background-color ${designSystem.designTokens.transitionStandard},
486
- color ${designSystem.designTokens.transitionStandard}`,
487
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
508
+ transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
509
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
488
510
  lineHeight: designSystem.designTokens.lineHeight40,
489
511
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
490
512
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -527,13 +549,14 @@ const placeholderStyles = props => base => {
527
549
  });
528
550
  };
529
551
  const getInputValueLayout = props => {
552
+ var _props$controlShouldR;
530
553
  switch (true) {
531
554
  case props.appearance === 'filter':
532
555
  return 'grid';
533
556
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
534
557
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
535
558
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
536
- case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
559
+ case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true):
537
560
  return 'flex';
538
561
  default:
539
562
  return 'grid';
@@ -569,18 +592,19 @@ const groupStyles = props => base => {
569
592
  return _objectSpread(_objectSpread({}, base), {}, {
570
593
  padding: 0,
571
594
  '&:not(:first-of-type)': {
572
- borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
595
+ borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
573
596
  }
574
597
  });
575
598
  };
576
599
  const groupHeadingStyles = () => base => {
600
+ var _context5;
577
601
  return _objectSpread(_objectSpread({}, base), {}, {
578
602
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
579
603
  fontSize: designSystem.designTokens.fontSize20,
580
- borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
604
+ borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
581
605
  textTransform: 'none',
582
606
  fontWeight: designSystem.designTokens.fontWeight500,
583
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
607
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
584
608
  '&:empty': {
585
609
  padding: 0
586
610
  }
@@ -604,17 +628,19 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
604
628
  zIndex: props.menuPortalZIndex
605
629
  });
606
630
  const multiValueStyles = props => base => {
631
+ var _context6, _context7;
607
632
  return _objectSpread(_objectSpread({}, base), {}, {
608
633
  display: 'flex',
609
634
  alignItems: 'center',
610
635
  height: props.isCondensed ? 'inherit' : '32px',
611
636
  backgroundColor: getMultiValueBackgroundColor(props),
612
- padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
613
- border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
637
+ padding: props.isCondensed ? _concatInstanceProperty__default["default"](_context6 = _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.spacing20, " 0 calc(")).call(_context7, designSystem.designTokens.spacing05, " + ")).call(_context6, designSystem.designTokens.spacing10, ")") : designSystem.designTokens.spacing20,
638
+ border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
614
639
  borderRadius: designSystem.designTokens.borderRadius20
615
640
  });
616
641
  };
617
642
  const multiValueLabelStyles = props => base => {
643
+ var _context8, _context9;
618
644
  return _objectSpread(_objectSpread({}, base), {}, {
619
645
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
620
646
  lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
@@ -623,8 +649,8 @@ const multiValueLabelStyles = props => base => {
623
649
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
624
650
  return base.color;
625
651
  })(),
626
- padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
627
- borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
652
+ padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
653
+ borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
628
654
  border: 'none',
629
655
  borderWidth: '1px 0 1px 1px',
630
656
  '&:last-child': {
@@ -634,10 +660,11 @@ const multiValueLabelStyles = props => base => {
634
660
  });
635
661
  };
636
662
  const multiValueRemoveStyles = props => (base, state) => {
663
+ var _context0;
637
664
  return _objectSpread(_objectSpread({}, base), {}, {
638
665
  borderColor: designSystem.designTokens.colorNeutral,
639
- padding: `0 ${designSystem.designTokens.spacing10}`,
640
- borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
666
+ padding: "0 ".concat(designSystem.designTokens.spacing10),
667
+ borderRadius: _concatInstanceProperty__default["default"](_context0 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context0, designSystem.designTokens.borderRadius2, " 0"),
641
668
  borderStyle: 'none',
642
669
  borderWidth: '0',
643
670
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -677,7 +704,7 @@ function createSelectStyles(props) {
677
704
  };
678
705
  }
679
706
 
680
- const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
707
+ const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
681
708
  const warnIfMenuPortalPropsAreMissing = props => {
682
709
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
683
710
  ) {
@@ -686,7 +713,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
686
713
  };
687
714
 
688
715
  // NOTE: This string will be replaced on build time with the package version.
689
- var version = "20.2.3";
716
+ var version = "20.3.1";
690
717
 
691
718
  exports.ClearIndicator = ClearIndicator$1;
692
719
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -12,6 +12,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
12
12
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
13
13
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
14
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
15
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
15
16
  var designSystem = require('@commercetools-uikit/design-system');
16
17
  require('@commercetools-uikit/utils');
17
18
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -36,6 +37,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
37
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
38
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
39
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
40
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
39
41
  var omit__default = /*#__PURE__*/_interopDefault(omit);
40
42
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
41
43
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -44,9 +46,11 @@ var CheckboxInput__default = /*#__PURE__*/_interopDefault(CheckboxInput);
44
46
 
45
47
  var messages$1 = reactIntl.defineMessages({
46
48
  clearButtonLabel: {
47
- id: 'UIKit.ClearButton.clearButtonLabel',
48
- description: 'Label for the clear button',
49
- defaultMessage: 'Clear'
49
+ id: "UIKit.ClearButton.clearButtonLabel",
50
+ defaultMessage: [{
51
+ "type": 0,
52
+ "value": "Clear"
53
+ }]
50
54
  }
51
55
  });
52
56
 
@@ -178,11 +182,11 @@ const MultiplePropertiesSelectInputOption = props => {
178
182
  scale: "xs",
179
183
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
180
184
  fontWeight: "bold",
181
- children: data?.label || noValueFallback
185
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
182
186
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
183
- children: ["Key: ", data?.key || noValueFallback]
187
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
184
188
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
185
- children: ["ID: ", data?.id || noValueFallback]
189
+ children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
186
190
  })]
187
191
  })
188
192
  }));
@@ -196,15 +200,16 @@ const DoublePropertySelectInputOption = props => {
196
200
  scale: "xs",
197
201
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
198
202
  fontWeight: "bold",
199
- children: data?.label || noValueFallback
203
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
200
204
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
201
- children: ["Key: ", data?.key || noValueFallback]
205
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
202
206
  })]
203
207
  })
204
208
  }));
205
209
  };
206
210
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
207
211
  const CustomSelectInputOption = props => {
212
+ var _props$optionInnerPro;
208
213
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
209
214
  switch (props.optionType) {
210
215
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -218,7 +223,7 @@ const CustomSelectInputOption = props => {
218
223
  default:
219
224
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
220
225
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
221
- children: props.optionInnerProps.data?.label || noValueFallback
226
+ children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
222
227
  })
223
228
  }));
224
229
  }
@@ -242,7 +247,7 @@ const optionStyleCheckboxComponents = appearance => {
242
247
  "data-component": "option",
243
248
  ref: innerRef
244
249
  }, innerProps), {}, {
245
- 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, ";}" + ("" ), "" ),
250
+ css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && "background-color: ".concat(designSystem.designTokens.backgroundColorForInputWhenHovered, ";"), " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + ("" ), "" ),
246
251
  className: className,
247
252
  "aria-disabled": isDisabled,
248
253
  children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
@@ -275,45 +280,63 @@ const optionsStyleCheckboxSelectProps = () => {
275
280
 
276
281
  var messages = reactIntl.defineMessages({
277
282
  createLabel: {
278
- id: 'UIKit.CreatableSelectInput.createLabel',
279
- description: 'Text of dropdown when creating option',
280
- defaultMessage: 'Create "{inputValue}"'
283
+ id: "UIKit.CreatableSelectInput.createLabel",
284
+ defaultMessage: [{
285
+ "type": 0,
286
+ "value": "Create \""
287
+ }, {
288
+ "type": 1,
289
+ "value": "inputValue"
290
+ }, {
291
+ "type": 0,
292
+ "value": "\""
293
+ }]
281
294
  },
282
295
  noOptionsMessageWithInputValue: {
283
- id: 'UIKit.SelectInput.noOptionsMessageWithInputValue',
284
- description: 'Text of dropdown when no options match search text',
285
- defaultMessage: 'No options'
296
+ id: "UIKit.SelectInput.noOptionsMessageWithInputValue",
297
+ defaultMessage: [{
298
+ "type": 0,
299
+ "value": "No options"
300
+ }]
286
301
  },
287
302
  noOptionsMessageWithoutInputValue: {
288
- id: 'UIKit.SelectInput.noOptionsMessageWithoutInputValue',
289
- description: 'Text of dropdown when no options exist',
290
- defaultMessage: 'No options'
303
+ id: "UIKit.SelectInput.noOptionsMessageWithoutInputValue",
304
+ defaultMessage: [{
305
+ "type": 0,
306
+ "value": "No options"
307
+ }]
291
308
  },
292
309
  placeholder: {
293
- id: 'UIKit.SelectInput.placeholder',
294
- description: 'Default input placeholder text',
295
- defaultMessage: 'Select...'
310
+ id: "UIKit.SelectInput.placeholder",
311
+ defaultMessage: [{
312
+ "type": 0,
313
+ "value": "Select..."
314
+ }]
296
315
  },
297
316
  selectInputAsFilterPlaceholder: {
298
- id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
299
- description: 'Default input placeholder text when used as filter',
300
- defaultMessage: 'Search'
317
+ id: "UIKit.SelectInput.selectInputAsFilterPlaceholder",
318
+ defaultMessage: [{
319
+ "type": 0,
320
+ "value": "Search"
321
+ }]
301
322
  },
302
323
  loadingOptions: {
303
- id: 'UIKit.SelectInput.loadingOptions',
304
- description: 'Default input loading text',
305
- defaultMessage: 'Loading...'
324
+ id: "UIKit.SelectInput.loadingOptions",
325
+ defaultMessage: [{
326
+ "type": 0,
327
+ "value": "Loading..."
328
+ }]
306
329
  }
307
330
  });
308
331
 
309
332
  function ownKeys(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; }
310
- function _objectSpread(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(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(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
333
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
311
334
  const getHorizontalConstraintValue = value => {
312
335
  switch (value) {
313
336
  case 'auto':
314
337
  return 'initial';
315
338
  default:
316
- return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
339
+ return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
317
340
  }
318
341
  };
319
342
  const getInputBackgroundColor = props => {
@@ -383,6 +406,7 @@ const getHoverInputBackgroundColor = props => {
383
406
  return null;
384
407
  };
385
408
  const controlStyles = props => (base, state) => {
409
+ var _context;
386
410
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
387
411
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
388
412
  backgroundColor: getInputBackgroundColor(props),
@@ -400,9 +424,8 @@ const controlStyles = props => (base, state) => {
400
424
  if (props.isReadOnly) return 'default';
401
425
  return 'pointer';
402
426
  })(),
403
- padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
404
- transition: `border-color ${designSystem.designTokens.transitionStandard},
405
- box-shadow ${designSystem.designTokens.transitionStandard}`,
427
+ padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
428
+ transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
406
429
  outline: 0,
407
430
  boxShadow: 'none'
408
431
  }, props.horizontalConstraint === 'auto' ? {
@@ -427,13 +450,13 @@ const menuStyles = props => base => {
427
450
  position: 'inherit',
428
451
  zIndex: 'inherit'
429
452
  } : {}), {}, {
430
- border: `1px solid ${designSystem.designTokens.colorSurface}`,
453
+ border: "1px solid ".concat(designSystem.designTokens.colorSurface),
431
454
  borderRadius: designSystem.designTokens.borderRadiusForInput,
432
455
  backgroundColor: designSystem.designTokens.backgroundColorForInput,
433
456
  boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
434
457
  fontSize: designSystem.designTokens.fontSize30,
435
458
  fontFamily: 'inherit',
436
- margin: `${designSystem.designTokens.spacing10} 0 0 0`,
459
+ margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
437
460
  borderColor: (() => {
438
461
  if (props.hasError || props.hasWarning) {
439
462
  return designSystem.designTokens.colorSurface;
@@ -474,17 +497,16 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
474
497
  });
475
498
  const menuListStyles = () => base => {
476
499
  return _objectSpread(_objectSpread({}, base), {}, {
477
- padding: `${designSystem.designTokens.spacing10} 0`,
500
+ padding: "".concat(designSystem.designTokens.spacing10, " 0"),
478
501
  borderRadius: designSystem.designTokens.borderRadiusForInput,
479
502
  backgroundColor: designSystem.designTokens.backgroundColorForInput
480
503
  });
481
504
  };
482
505
  const optionStyles = props => (base, state) => {
506
+ var _context2, _context3, _context4;
483
507
  return _objectSpread(_objectSpread({}, base), {}, {
484
- transition: `border-color ${designSystem.designTokens.transitionStandard},
485
- background-color ${designSystem.designTokens.transitionStandard},
486
- color ${designSystem.designTokens.transitionStandard}`,
487
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
508
+ transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
509
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
488
510
  lineHeight: designSystem.designTokens.lineHeight40,
489
511
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
490
512
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -527,13 +549,14 @@ const placeholderStyles = props => base => {
527
549
  });
528
550
  };
529
551
  const getInputValueLayout = props => {
552
+ var _props$controlShouldR;
530
553
  switch (true) {
531
554
  case props.appearance === 'filter':
532
555
  return 'grid';
533
556
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
534
557
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
535
558
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
536
- case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
559
+ case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true):
537
560
  return 'flex';
538
561
  default:
539
562
  return 'grid';
@@ -569,18 +592,19 @@ const groupStyles = props => base => {
569
592
  return _objectSpread(_objectSpread({}, base), {}, {
570
593
  padding: 0,
571
594
  '&:not(:first-of-type)': {
572
- borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
595
+ borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
573
596
  }
574
597
  });
575
598
  };
576
599
  const groupHeadingStyles = () => base => {
600
+ var _context5;
577
601
  return _objectSpread(_objectSpread({}, base), {}, {
578
602
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
579
603
  fontSize: designSystem.designTokens.fontSize20,
580
- borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
604
+ borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
581
605
  textTransform: 'none',
582
606
  fontWeight: designSystem.designTokens.fontWeight500,
583
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
607
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
584
608
  '&:empty': {
585
609
  padding: 0
586
610
  }
@@ -604,17 +628,19 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
604
628
  zIndex: props.menuPortalZIndex
605
629
  });
606
630
  const multiValueStyles = props => base => {
631
+ var _context6, _context7;
607
632
  return _objectSpread(_objectSpread({}, base), {}, {
608
633
  display: 'flex',
609
634
  alignItems: 'center',
610
635
  height: props.isCondensed ? 'inherit' : '32px',
611
636
  backgroundColor: getMultiValueBackgroundColor(props),
612
- padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
613
- border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
637
+ padding: props.isCondensed ? _concatInstanceProperty__default["default"](_context6 = _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.spacing20, " 0 calc(")).call(_context7, designSystem.designTokens.spacing05, " + ")).call(_context6, designSystem.designTokens.spacing10, ")") : designSystem.designTokens.spacing20,
638
+ border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
614
639
  borderRadius: designSystem.designTokens.borderRadius20
615
640
  });
616
641
  };
617
642
  const multiValueLabelStyles = props => base => {
643
+ var _context8, _context9;
618
644
  return _objectSpread(_objectSpread({}, base), {}, {
619
645
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
620
646
  lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
@@ -623,8 +649,8 @@ const multiValueLabelStyles = props => base => {
623
649
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
624
650
  return base.color;
625
651
  })(),
626
- padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
627
- borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
652
+ padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
653
+ borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
628
654
  border: 'none',
629
655
  borderWidth: '1px 0 1px 1px',
630
656
  '&:last-child': {
@@ -634,10 +660,11 @@ const multiValueLabelStyles = props => base => {
634
660
  });
635
661
  };
636
662
  const multiValueRemoveStyles = props => (base, state) => {
663
+ var _context0;
637
664
  return _objectSpread(_objectSpread({}, base), {}, {
638
665
  borderColor: designSystem.designTokens.colorNeutral,
639
- padding: `0 ${designSystem.designTokens.spacing10}`,
640
- borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
666
+ padding: "0 ".concat(designSystem.designTokens.spacing10),
667
+ borderRadius: _concatInstanceProperty__default["default"](_context0 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context0, designSystem.designTokens.borderRadius2, " 0"),
641
668
  borderStyle: 'none',
642
669
  borderWidth: '0',
643
670
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -683,7 +710,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
683
710
  };
684
711
 
685
712
  // NOTE: This string will be replaced on build time with the package version.
686
- var version = "20.2.3";
713
+ var version = "20.3.1";
687
714
 
688
715
  exports.ClearIndicator = ClearIndicator$1;
689
716
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -8,6 +8,7 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
8
8
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
9
9
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
10
10
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
11
+ import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
11
12
  import { designTokens } from '@commercetools-uikit/design-system';
12
13
  import { warning } from '@commercetools-uikit/utils';
13
14
  import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
@@ -24,9 +25,11 @@ import CheckboxInput from '@commercetools-uikit/checkbox-input';
24
25
 
25
26
  var messages$1 = defineMessages({
26
27
  clearButtonLabel: {
27
- id: 'UIKit.ClearButton.clearButtonLabel',
28
- description: 'Label for the clear button',
29
- defaultMessage: 'Clear'
28
+ id: "UIKit.ClearButton.clearButtonLabel",
29
+ defaultMessage: [{
30
+ "type": 0,
31
+ "value": "Clear"
32
+ }]
30
33
  }
31
34
  });
32
35
 
@@ -158,11 +161,11 @@ const MultiplePropertiesSelectInputOption = props => {
158
161
  scale: "xs",
159
162
  children: [jsx(Text.Detail, {
160
163
  fontWeight: "bold",
161
- children: data?.label || noValueFallback
164
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
162
165
  }), jsxs(Text.Detail, {
163
- children: ["Key: ", data?.key || noValueFallback]
166
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
164
167
  }), jsxs(Text.Detail, {
165
- children: ["ID: ", data?.id || noValueFallback]
168
+ children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
166
169
  })]
167
170
  })
168
171
  }));
@@ -176,15 +179,16 @@ const DoublePropertySelectInputOption = props => {
176
179
  scale: "xs",
177
180
  children: [jsx(Text.Detail, {
178
181
  fontWeight: "bold",
179
- children: data?.label || noValueFallback
182
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
180
183
  }), jsxs(Text.Detail, {
181
- children: ["Key: ", data?.key || noValueFallback]
184
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
182
185
  })]
183
186
  })
184
187
  }));
185
188
  };
186
189
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
187
190
  const CustomSelectInputOption = props => {
191
+ var _props$optionInnerPro;
188
192
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
189
193
  switch (props.optionType) {
190
194
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -198,7 +202,7 @@ const CustomSelectInputOption = props => {
198
202
  default:
199
203
  return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
200
204
  children: jsx(Text.Detail, {
201
- children: props.optionInnerProps.data?.label || noValueFallback
205
+ children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
202
206
  })
203
207
  }));
204
208
  }
@@ -222,7 +226,7 @@ const optionStyleCheckboxComponents = appearance => {
222
226
  "data-component": "option",
223
227
  ref: innerRef
224
228
  }, innerProps), {}, {
225
- 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== */"),
229
+ css: /*#__PURE__*/css("padding:", designTokens.spacing10, " ", designTokens.spacing20, ";", isFocused && "background-color: ".concat(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== */"),
226
230
  className: className,
227
231
  "aria-disabled": isDisabled,
228
232
  children: [jsx(CheckboxInput, {
@@ -255,45 +259,63 @@ const optionsStyleCheckboxSelectProps = () => {
255
259
 
256
260
  var messages = defineMessages({
257
261
  createLabel: {
258
- id: 'UIKit.CreatableSelectInput.createLabel',
259
- description: 'Text of dropdown when creating option',
260
- defaultMessage: 'Create "{inputValue}"'
262
+ id: "UIKit.CreatableSelectInput.createLabel",
263
+ defaultMessage: [{
264
+ "type": 0,
265
+ "value": "Create \""
266
+ }, {
267
+ "type": 1,
268
+ "value": "inputValue"
269
+ }, {
270
+ "type": 0,
271
+ "value": "\""
272
+ }]
261
273
  },
262
274
  noOptionsMessageWithInputValue: {
263
- id: 'UIKit.SelectInput.noOptionsMessageWithInputValue',
264
- description: 'Text of dropdown when no options match search text',
265
- defaultMessage: 'No options'
275
+ id: "UIKit.SelectInput.noOptionsMessageWithInputValue",
276
+ defaultMessage: [{
277
+ "type": 0,
278
+ "value": "No options"
279
+ }]
266
280
  },
267
281
  noOptionsMessageWithoutInputValue: {
268
- id: 'UIKit.SelectInput.noOptionsMessageWithoutInputValue',
269
- description: 'Text of dropdown when no options exist',
270
- defaultMessage: 'No options'
282
+ id: "UIKit.SelectInput.noOptionsMessageWithoutInputValue",
283
+ defaultMessage: [{
284
+ "type": 0,
285
+ "value": "No options"
286
+ }]
271
287
  },
272
288
  placeholder: {
273
- id: 'UIKit.SelectInput.placeholder',
274
- description: 'Default input placeholder text',
275
- defaultMessage: 'Select...'
289
+ id: "UIKit.SelectInput.placeholder",
290
+ defaultMessage: [{
291
+ "type": 0,
292
+ "value": "Select..."
293
+ }]
276
294
  },
277
295
  selectInputAsFilterPlaceholder: {
278
- id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
279
- description: 'Default input placeholder text when used as filter',
280
- defaultMessage: 'Search'
296
+ id: "UIKit.SelectInput.selectInputAsFilterPlaceholder",
297
+ defaultMessage: [{
298
+ "type": 0,
299
+ "value": "Search"
300
+ }]
281
301
  },
282
302
  loadingOptions: {
283
- id: 'UIKit.SelectInput.loadingOptions',
284
- description: 'Default input loading text',
285
- defaultMessage: 'Loading...'
303
+ id: "UIKit.SelectInput.loadingOptions",
304
+ defaultMessage: [{
305
+ "type": 0,
306
+ "value": "Loading..."
307
+ }]
286
308
  }
287
309
  });
288
310
 
289
311
  function ownKeys(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; }
290
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
312
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
291
313
  const getHorizontalConstraintValue = value => {
292
314
  switch (value) {
293
315
  case 'auto':
294
316
  return 'initial';
295
317
  default:
296
- return designTokens[`constraint${value}`] || designTokens.constraintScale;
318
+ return designTokens["constraint".concat(value)] || designTokens.constraintScale;
297
319
  }
298
320
  };
299
321
  const getInputBackgroundColor = props => {
@@ -363,6 +385,7 @@ const getHoverInputBackgroundColor = props => {
363
385
  return null;
364
386
  };
365
387
  const controlStyles = props => (base, state) => {
388
+ var _context;
366
389
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
367
390
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
368
391
  backgroundColor: getInputBackgroundColor(props),
@@ -380,9 +403,8 @@ const controlStyles = props => (base, state) => {
380
403
  if (props.isReadOnly) return 'default';
381
404
  return 'pointer';
382
405
  })(),
383
- padding: props.appearance === 'quiet' ? `0 ${designTokens.spacing20}` : `0 ${designTokens.spacing30}`,
384
- transition: `border-color ${designTokens.transitionStandard},
385
- box-shadow ${designTokens.transitionStandard}`,
406
+ padding: props.appearance === 'quiet' ? "0 ".concat(designTokens.spacing20) : "0 ".concat(designTokens.spacing30),
407
+ transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
386
408
  outline: 0,
387
409
  boxShadow: 'none'
388
410
  }, props.horizontalConstraint === 'auto' ? {
@@ -407,13 +429,13 @@ const menuStyles = props => base => {
407
429
  position: 'inherit',
408
430
  zIndex: 'inherit'
409
431
  } : {}), {}, {
410
- border: `1px solid ${designTokens.colorSurface}`,
432
+ border: "1px solid ".concat(designTokens.colorSurface),
411
433
  borderRadius: designTokens.borderRadiusForInput,
412
434
  backgroundColor: designTokens.backgroundColorForInput,
413
435
  boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
414
436
  fontSize: designTokens.fontSize30,
415
437
  fontFamily: 'inherit',
416
- margin: `${designTokens.spacing10} 0 0 0`,
438
+ margin: "".concat(designTokens.spacing10, " 0 0 0"),
417
439
  borderColor: (() => {
418
440
  if (props.hasError || props.hasWarning) {
419
441
  return designTokens.colorSurface;
@@ -454,17 +476,16 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
454
476
  });
455
477
  const menuListStyles = () => base => {
456
478
  return _objectSpread(_objectSpread({}, base), {}, {
457
- padding: `${designTokens.spacing10} 0`,
479
+ padding: "".concat(designTokens.spacing10, " 0"),
458
480
  borderRadius: designTokens.borderRadiusForInput,
459
481
  backgroundColor: designTokens.backgroundColorForInput
460
482
  });
461
483
  };
462
484
  const optionStyles = props => (base, state) => {
485
+ var _context2, _context3, _context4;
463
486
  return _objectSpread(_objectSpread({}, base), {}, {
464
- transition: `border-color ${designTokens.transitionStandard},
465
- background-color ${designTokens.transitionStandard},
466
- color ${designTokens.transitionStandard}`,
467
- padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
487
+ transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
488
+ padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing30),
468
489
  lineHeight: designTokens.lineHeight40,
469
490
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
470
491
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -507,13 +528,14 @@ const placeholderStyles = props => base => {
507
528
  });
508
529
  };
509
530
  const getInputValueLayout = props => {
531
+ var _props$controlShouldR;
510
532
  switch (true) {
511
533
  case props.appearance === 'filter':
512
534
  return 'grid';
513
535
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
514
536
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
515
537
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
516
- case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
538
+ case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true):
517
539
  return 'flex';
518
540
  default:
519
541
  return 'grid';
@@ -549,18 +571,19 @@ const groupStyles = props => base => {
549
571
  return _objectSpread(_objectSpread({}, base), {}, {
550
572
  padding: 0,
551
573
  '&:not(:first-of-type)': {
552
- borderTop: props.showOptionGroupDivider ? `1px solid ${designTokens.colorNeutral90}` : base.borderTop
574
+ borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.colorNeutral90) : base.borderTop
553
575
  }
554
576
  });
555
577
  };
556
578
  const groupHeadingStyles = () => base => {
579
+ var _context5;
557
580
  return _objectSpread(_objectSpread({}, base), {}, {
558
581
  color: designTokens.fontColorForInputWhenReadonly,
559
582
  fontSize: designTokens.fontSize20,
560
- borderBottom: `1px solid ${designTokens.colorNeutral90}`,
583
+ borderBottom: "1px solid ".concat(designTokens.colorNeutral90),
561
584
  textTransform: 'none',
562
585
  fontWeight: designTokens.fontWeight500,
563
- padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
586
+ padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.spacing30),
564
587
  '&:empty': {
565
588
  padding: 0
566
589
  }
@@ -584,17 +607,19 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
584
607
  zIndex: props.menuPortalZIndex
585
608
  });
586
609
  const multiValueStyles = props => base => {
610
+ var _context6, _context7;
587
611
  return _objectSpread(_objectSpread({}, base), {}, {
588
612
  display: 'flex',
589
613
  alignItems: 'center',
590
614
  height: props.isCondensed ? 'inherit' : '32px',
591
615
  backgroundColor: getMultiValueBackgroundColor(props),
592
- padding: props.isCondensed ? `0 ${designTokens.spacing20} 0 calc(${designTokens.spacing05} + ${designTokens.spacing10})` : designTokens.spacing20,
593
- border: `1px solid ${designTokens.colorNeutral85}`,
616
+ padding: props.isCondensed ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "0 ".concat(designTokens.spacing20, " 0 calc(")).call(_context7, designTokens.spacing05, " + ")).call(_context6, designTokens.spacing10, ")") : designTokens.spacing20,
617
+ border: "1px solid ".concat(designTokens.colorNeutral85),
594
618
  borderRadius: designTokens.borderRadius20
595
619
  });
596
620
  };
597
621
  const multiValueLabelStyles = props => base => {
622
+ var _context8, _context9;
598
623
  return _objectSpread(_objectSpread({}, base), {}, {
599
624
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
600
625
  lineHeight: props.isCondensed ? designTokens.lineHeight20 : designTokens.lineHeight40,
@@ -603,8 +628,8 @@ const multiValueLabelStyles = props => base => {
603
628
  if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
604
629
  return base.color;
605
630
  })(),
606
- padding: `${props.isCondensed ? '1px' : designTokens.spacing10} ${designTokens.spacing20}`,
607
- borderRadius: `${designTokens.borderRadius2} 0 0 ${designTokens.borderRadius2}`,
631
+ padding: _concatInstanceProperty(_context8 = "".concat(props.isCondensed ? '1px' : designTokens.spacing10, " ")).call(_context8, designTokens.spacing20),
632
+ borderRadius: _concatInstanceProperty(_context9 = "".concat(designTokens.borderRadius2, " 0 0 ")).call(_context9, designTokens.borderRadius2),
608
633
  border: 'none',
609
634
  borderWidth: '1px 0 1px 1px',
610
635
  '&:last-child': {
@@ -614,10 +639,11 @@ const multiValueLabelStyles = props => base => {
614
639
  });
615
640
  };
616
641
  const multiValueRemoveStyles = props => (base, state) => {
642
+ var _context0;
617
643
  return _objectSpread(_objectSpread({}, base), {}, {
618
644
  borderColor: designTokens.colorNeutral,
619
- padding: `0 ${designTokens.spacing10}`,
620
- borderRadius: `0 ${designTokens.borderRadius2} ${designTokens.borderRadius2} 0`,
645
+ padding: "0 ".concat(designTokens.spacing10),
646
+ borderRadius: _concatInstanceProperty(_context0 = "0 ".concat(designTokens.borderRadius2, " ")).call(_context0, designTokens.borderRadius2, " 0"),
621
647
  borderStyle: 'none',
622
648
  borderWidth: '0',
623
649
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -657,7 +683,7 @@ function createSelectStyles(props) {
657
683
  };
658
684
  }
659
685
 
660
- const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
686
+ const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
661
687
  const warnIfMenuPortalPropsAreMissing = props => {
662
688
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
663
689
  ) {
@@ -666,6 +692,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
666
692
  };
667
693
 
668
694
  // NOTE: This string will be replaced on build time with the package version.
669
- var version = "20.2.3";
695
+ var version = "20.3.1";
670
696
 
671
697
  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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/select-utils",
3
3
  "description": "Utilities for working with select components.",
4
- "version": "20.2.3",
4
+ "version": "20.3.1",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,21 +21,21 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "20.2.3",
25
- "@commercetools-uikit/checkbox-input": "20.2.3",
26
- "@commercetools-uikit/design-system": "20.2.3",
27
- "@commercetools-uikit/icons": "20.2.3",
28
- "@commercetools-uikit/spacings": "20.2.3",
29
- "@commercetools-uikit/text": "20.2.3",
30
- "@commercetools-uikit/utils": "20.2.3",
24
+ "@commercetools-uikit/accessible-button": "20.3.1",
25
+ "@commercetools-uikit/checkbox-input": "20.3.1",
26
+ "@commercetools-uikit/design-system": "20.3.1",
27
+ "@commercetools-uikit/icons": "20.3.1",
28
+ "@commercetools-uikit/spacings": "20.3.1",
29
+ "@commercetools-uikit/text": "20.3.1",
30
+ "@commercetools-uikit/utils": "20.3.1",
31
31
  "@emotion/react": "^11.10.5",
32
32
  "@emotion/styled": "^11.10.5",
33
- "lodash": "4.17.21",
33
+ "lodash": "4.17.23",
34
34
  "react-select": "5.10.2"
35
35
  },
36
36
  "devDependencies": {
37
- "react": "19.1.0",
38
- "react-dom": "19.1.0",
37
+ "react": "19.2.0",
38
+ "react-dom": "19.2.0",
39
39
  "react-intl": "^7.1.4"
40
40
  },
41
41
  "peerDependencies": {