@luminati-io/uikit 3.2.11-beta.0 → 3.2.11

package/dist/umd/uikit.development.js

@@ -36849,8 +36849,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   buildComponents: () => (/* binding */ buildComponents)
 /* harmony export */ });
-/* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./option */ "./src/input/checkbox_list/option.js");
-/* harmony import */ var _util_virtualized_list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../util/virtualized_list */ "./src/util/virtualized_list.js");
+/* harmony import */ var _util_virtualized_list__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../util/virtualized_list */ "./src/util/virtualized_list.js");
+/* harmony import */ var _dropdown_clear_indicator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../dropdown/clear_indicator */ "./src/input/dropdown/clear_indicator.js");
+/* harmony import */ var _dropdown_value_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../dropdown/value_container */ "./src/input/dropdown/value_container.js");
+/* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./option */ "./src/input/checkbox_list/option.js");
 // LICENSE_CODE ZON
 
 
@@ -36863,20 +36865,24 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 
 
+
+
 var buildComponents = function buildComponents(props) {
   var components = _objectSpread({
     IndicatorSeparator: null,
     DropdownIndicator: null,
-    Option: _option__WEBPACK_IMPORTED_MODULE_0__.Option
+    ClearIndicator: _dropdown_clear_indicator__WEBPACK_IMPORTED_MODULE_1__.ClearIndicator,
+    Option: _option__WEBPACK_IMPORTED_MODULE_3__.Option
   }, props.components);
-  if (props.virtualized) {
-    components.MenuList = (0,_util_virtualized_list__WEBPACK_IMPORTED_MODULE_1__.VirtualizedListFactory)({
+  if (props.virtualized && components.MenuList === undefined) {
+    components.MenuList = (0,_util_virtualized_list__WEBPACK_IMPORTED_MODULE_0__.VirtualizedListFactory)({
       optionHeight: props.optionHeight,
       defaultValue: props.defaultValue,
       formatOptionLabel: props.formatOptionLabel,
       Option: components.Option
     });
   }
+  if (props.autosize === false && components.ValueContainer === undefined) components.ValueContainer = _dropdown_value_container__WEBPACK_IMPORTED_MODULE_2__.ValueContainer;
   return components;
 };
 
@@ -36893,27 +36899,36 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   CheckboxList: () => (/* binding */ CheckboxList)
 /* harmony export */ });
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/react-select.esm.js");
-/* harmony import */ var react_select_creatable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-select/creatable */ "./node_modules/react-select/creatable/dist/react-select-creatable.esm.js");
-/* harmony import */ var react_select_async__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-select/async */ "./node_modules/react-select/async/dist/react-select-async.esm.js");
-/* harmony import */ var react_select_async_creatable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-select/async-creatable */ "./node_modules/react-select/async-creatable/dist/react-select-async-creatable.esm.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../layout */ "./src/layout/index.js");
-/* harmony import */ var _translation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../translation */ "./src/translation.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../util */ "./src/util/index.js");
-/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../shared */ "./src/input/shared.js");
-/* harmony import */ var _build_components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./build_components */ "./src/input/checkbox_list/build_components.js");
-/* harmony import */ var _use_styles__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./use_styles */ "./src/input/checkbox_list/use_styles.js");
+/* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/omit */ "./node_modules/lodash/omit.js");
+/* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_omit__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/react-select.esm.js");
+/* harmony import */ var react_select_creatable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-select/creatable */ "./node_modules/react-select/creatable/dist/react-select-creatable.esm.js");
+/* harmony import */ var react_select_async__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-select/async */ "./node_modules/react-select/async/dist/react-select-async.esm.js");
+/* harmony import */ var react_select_async_creatable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-select/async-creatable */ "./node_modules/react-select/async-creatable/dist/react-select-async-creatable.esm.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../layout */ "./src/layout/index.js");
+/* harmony import */ var _translation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../translation */ "./src/translation.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../util */ "./src/util/index.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../shared */ "./src/input/shared.js");
+/* harmony import */ var _build_components__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./build_components */ "./src/input/checkbox_list/build_components.js");
+/* harmony import */ var _use_styles__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./use_styles */ "./src/input/checkbox_list/use_styles.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["label", "labelIcon", "required", "value", "defaultValue", "placeholder", "options", "onChange", "onFocus", "onBlur", "creatable", "disabled", "invalid", "helperText", "className", "classNamePrefix", "onChangeCapture", "filterOption", "formatOptionLabel", "onInputChange", "getOptionValue", "getOptionLabel", "isOptionDisabled", "isOptionSelected", "async", "isLoading", "loadOptions", "defaultOptions", "cacheOptions", "onCreateOption", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "autoFocus", "searchable"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+var _excluded = ["id", "styles", "size", "async", "creatable", "isOptionDisabled", "className", "label", "labelIcon", "required", "invalid", "helperText", "placeholder", "disabled"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
@@ -36929,162 +36944,93 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-var CheckboxList = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, forwardRef) {
-  var label = props.label,
+var CheckboxList = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (props, forwardRef) {
+  var id = props.id,
+    styles = props.styles,
+    size = props.size,
+    async = props.async,
+    creatable = props.creatable,
+    isOptionDisabled = props.isOptionDisabled,
+    className = props.className,
+    label = props.label,
     labelIcon = props.labelIcon,
     required = props.required,
-    value = props.value,
-    defaultValue = props.defaultValue,
-    placeholder = props.placeholder,
-    options = props.options,
-    onChange = props.onChange,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    creatable = props.creatable,
-    disabled = props.disabled,
     invalid = props.invalid,
     helperText = props.helperText,
-    className = props.className,
-    classNamePrefix = props.classNamePrefix,
-    onChangeCapture = props.onChangeCapture,
-    filterOption = props.filterOption,
-    formatOptionLabel = props.formatOptionLabel,
-    onInputChange = props.onInputChange,
-    getOptionValue = props.getOptionValue,
-    getOptionLabel = props.getOptionLabel,
-    isOptionDisabled = props.isOptionDisabled,
-    isOptionSelected = props.isOptionSelected,
-    async = props.async,
-    isLoading = props.isLoading,
-    loadOptions = props.loadOptions,
-    defaultOptions = props.defaultOptions,
-    cacheOptions = props.cacheOptions,
-    onCreateOption = props.onCreateOption,
-    formatCreateLabel = props.formatCreateLabel,
-    isValidNewOption = props.isValidNewOption,
-    getNewOptionData = props.getNewOptionData,
-    autoFocus = props.autoFocus,
-    searchable = props.searchable,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
     rest = _objectWithoutProperties(props, _excluded);
-  var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useLabelId)(props.id);
-  var t = (0,_translation__WEBPACK_IMPORTED_MODULE_7__.useTranslate)();
-  var styles = (0,_use_styles__WEBPACK_IMPORTED_MODULE_11__.useStyles)(props);
+  var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_6__.useLabelId)(id);
+  var t = (0,_translation__WEBPACK_IMPORTED_MODULE_8__.useTranslate)();
   var SelectComp = getComponent({
     async: async,
     creatable: creatable
   });
-  var _isOptionDisabled = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+  var _styles = (0,_use_styles__WEBPACK_IMPORTED_MODULE_12__.useStyles)({
+    styles: styles,
+    size: size
+  });
+  var _isOptionDisabled = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {
     return isOptionDisabled || function (opt) {
       return opt.disabled;
     };
   }, [isOptionDisabled]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_6__.Flex, _extends({
+  var wrapperProps = _objectSpread(_objectSpread({}, (0,_util__WEBPACK_IMPORTED_MODULE_9__.getAriaProps)(rest)), (0,_util__WEBPACK_IMPORTED_MODULE_9__.getDataProps)(rest));
+  var selectProps = lodash_omit__WEBPACK_IMPORTED_MODULE_0___default()(rest, Object.keys(wrapperProps));
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_7__.Flex, _extends({
     ref: forwardRef,
     "data-testid": "checkbox-list",
-    className: className
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_8__.getCommonProps)(rest), {
+    className: className,
     flex_direction: "column",
     gap: "02"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_9__.InputLabel, {
+  }, wrapperProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_10__.InputLabel, {
     id: labelId,
     label: label,
     labelIcon: labelIcon,
     required: required
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(SelectComp, {
-    backspaceRemovesValue: false,
-    controlShouldRenderValue: false,
-    hideSelectedOptions: false,
-    isClearable: false,
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(SelectComp, _extends({}, selectProps, {
+    id: id,
     menuIsOpen: true,
     isMulti: true,
     menuPlacement: "bottom",
-    autoFocus: autoFocus,
-    filterOption: filterOption,
-    formatOptionLabel: formatOptionLabel,
     "aria-labelledby": label ? labelId : undefined,
     "aria-invalid": invalid,
-    value: value,
-    defaultValue: defaultValue,
     placeholder: t(placeholder),
-    options: options,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
     isDisabled: disabled,
     required: required,
-    styles: styles,
-    components: (0,_build_components__WEBPACK_IMPORTED_MODULE_10__.buildComponents)(props),
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_8__.classNames)(className, {
+    styles: _styles,
+    components: (0,_build_components__WEBPACK_IMPORTED_MODULE_11__.buildComponents)(props),
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_9__.classNames)(className, {
       container: true
     }),
-    classNamePrefix: classNamePrefix,
-    onChangeCapture: onChangeCapture,
-    onInputChange: onInputChange,
-    getOptionValue: getOptionValue,
-    getOptionLabel: getOptionLabel,
-    isOptionDisabled: _isOptionDisabled,
-    isOptionSelected: isOptionSelected,
-    isLoading: isLoading,
-    loadOptions: loadOptions,
-    defaultOptions: defaultOptions,
-    cacheOptions: cacheOptions,
-    onCreateOption: onCreateOption,
-    formatCreateLabel: formatCreateLabel,
-    isValidNewOption: isValidNewOption,
-    getNewOptionData: getNewOptionData,
-    isSearchable: searchable
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_9__.HelperText, {
+    isOptionDisabled: _isOptionDisabled
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_10__.HelperText, {
     invalid: invalid
   }, helperText));
 });
 CheckboxList.displayName = 'CheckboxList';
 CheckboxList.propTypes = {
-  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
-  defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
-  filterOption: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  formatOptionLabel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
-  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  required: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  label: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]),
-  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
-  helperText: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg']),
-  options: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().any)),
-  creatable: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
-  virtualized: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  autosize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  onInputChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  getOptionValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  getOptionLabel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  isOptionDisabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  isOptionSelected: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  async: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  isLoading: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  loadOptions: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  defaultOptions: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool), prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().any))]),
-  cacheOptions: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
-  components: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  styles: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  onCreateOption: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  formatCreateLabel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  isValidNewOption: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  getNewOptionData: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  autoFocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  searchable: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
+  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  placeholder: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  required: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['sm', 'md', 'lg']),
+  virtualized: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 CheckboxList.defaultProps = {
   size: 'sm',
   placeholder: 'Search...'
 };
 var getComponent = function getComponent(opt) {
-  if (opt.async) return opt.creatable ? react_select_async_creatable__WEBPACK_IMPORTED_MODULE_4__["default"] : react_select_async__WEBPACK_IMPORTED_MODULE_3__["default"];
-  return opt.creatable ? react_select_creatable__WEBPACK_IMPORTED_MODULE_2__["default"] : react_select__WEBPACK_IMPORTED_MODULE_12__["default"];
+  if (opt.async) return opt.creatable ? react_select_async_creatable__WEBPACK_IMPORTED_MODULE_5__["default"] : react_select_async__WEBPACK_IMPORTED_MODULE_4__["default"];
+  return opt.creatable ? react_select_creatable__WEBPACK_IMPORTED_MODULE_3__["default"] : react_select__WEBPACK_IMPORTED_MODULE_13__["default"];
 };
 
 /***/ }),
@@ -37193,6 +37139,20 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 
 
 
+var HeaderXl = {
+  fontFamily: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_family.sans,
+  fontStyle: 'normal',
+  fontWeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_weight.medium,
+  fontSize: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_size.lg,
+  lineHeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].line_height.none
+};
+var LabelSm = {
+  fontFamily: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_family.sans,
+  fontStyle: 'normal',
+  fontWeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_weight.regular,
+  fontSize: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_size.sm,
+  lineHeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].line_height.none
+};
 var useStyles = function useStyles(_ref) {
   var styles = _ref.styles,
     size = _ref.size;
@@ -37214,15 +37174,9 @@ var useStyles = function useStyles(_ref) {
           backgroundColor = _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_2;
           cursor = 'default';
         } else if (state.selectProps['aria-invalid']) borderColor = _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.red_11;else if (state.isFocused) borderColor = _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.blue_11;
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
           minHeight: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.toPixel)(height[size] || height.sm),
           padding: "".concat(_shared__WEBPACK_IMPORTED_MODULE_3__.inputVerticalPadding, "px ").concat(_shared__WEBPACK_IMPORTED_MODULE_3__.inputHorizontalPadding, "px"),
-          /* Label/sm */
-          fontFamily: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_weight.regular,
-          fontSize: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_size.sm,
-          lineHeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].line_height.none,
           color: color,
           backgroundColor: backgroundColor,
           borderColor: borderColor,
@@ -37262,28 +37216,42 @@ var useStyles = function useStyles(_ref) {
         });
       },
       option: function option(baseStyles, state) {
-        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
           display: 'flex',
           alignItems: 'center',
-          gap: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].spacing['03'],
-          backgroundColor: undefined,
-          /* Label/sm */
-          fontFamily: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_weight.regular,
-          fontSize: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_size.sm,
-          lineHeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].line_height.none,
+          gap: '8px',
+          height: '40px',
+          backgroundColor: state.isFocused ? _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_2 : undefined,
           color: state.isDisabled ? _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_9 : _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_11_50
         });
       },
-      noOptionsMessage: function noOptionsMessage(baseStyles) {
+      multiValue: function multiValue(baseStyles) {
         return _objectSpread(_objectSpread({}, baseStyles), {}, {
-          /* Header/xl */
-          fontFamily: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_family.sans,
-          fontStyle: 'normal',
-          fontWeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_weight.medium,
-          fontSize: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].font_size.lg,
-          lineHeight: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].line_height.none,
+          backgroundColor: undefined,
+          border: "1px solid ".concat(_theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_6),
+          borderRadius: '4px'
+        });
+      },
+      multiValueLabel: function multiValueLabel(baseStyles) {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), LabelSm), {}, {
+          borderRadius: '4px',
+          padding: '4px 4px 4px 8px',
+          color: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_11_25
+        });
+      },
+      multiValueRemove: function multiValueRemove(baseStyles) {
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          borderRadius: '4px',
+          color: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_11,
+          cursor: 'pointer',
+          ':hover': {
+            backgroundColor: undefined,
+            color: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_11_50
+          }
+        });
+      },
+      noOptionsMessage: function noOptionsMessage(baseStyles) {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), HeaderXl), {}, {
           color: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.gray_9
         });
       }
@@ -37744,13 +37712,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   buildComponents: () => (/* binding */ buildComponents)
 /* harmony export */ });
-/* harmony import */ var _clear_indicator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./clear_indicator */ "./src/input/dropdown/clear_indicator.js");
-/* harmony import */ var _dropdown_indicator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dropdown_indicator */ "./src/input/dropdown/dropdown_indicator.js");
-/* harmony import */ var _group__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./group */ "./src/input/dropdown/group.js");
-/* harmony import */ var _menu_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./menu_list */ "./src/input/dropdown/menu_list.js");
-/* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./option */ "./src/input/dropdown/option.js");
-/* harmony import */ var _value_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./value_container */ "./src/input/dropdown/value_container.js");
-/* harmony import */ var _util_virtualized_list__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/virtualized_list */ "./src/util/virtualized_list.js");
+/* harmony import */ var _util_virtualized_list__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../util/virtualized_list */ "./src/util/virtualized_list.js");
+/* harmony import */ var _clear_indicator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./clear_indicator */ "./src/input/dropdown/clear_indicator.js");
+/* harmony import */ var _dropdown_indicator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown_indicator */ "./src/input/dropdown/dropdown_indicator.js");
+/* harmony import */ var _group__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./group */ "./src/input/dropdown/group.js");
+/* harmony import */ var _menu_list__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./menu_list */ "./src/input/dropdown/menu_list.js");
+/* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./option */ "./src/input/dropdown/option.js");
+/* harmony import */ var _value_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./value_container */ "./src/input/dropdown/value_container.js");
 // LICENSE_CODE ZON
 
 
@@ -37769,25 +37737,23 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 
 
 var buildComponents = function buildComponents(props) {
+  var _props$components$Opt, _props$components;
   var components = _objectSpread({
-    IndicatorSeparator: function IndicatorSeparator() {
-      return null;
-    },
-    DropdownIndicator: _dropdown_indicator__WEBPACK_IMPORTED_MODULE_1__["default"],
-    ClearIndicator: _clear_indicator__WEBPACK_IMPORTED_MODULE_0__["default"],
-    MenuList: _menu_list__WEBPACK_IMPORTED_MODULE_3__.MenuList,
-    Group: _group__WEBPACK_IMPORTED_MODULE_2__.Group,
-    Option: _option__WEBPACK_IMPORTED_MODULE_4__.Option
-  }, props.components);
-  if (props.virtualized) {
-    components.MenuList = (0,_util_virtualized_list__WEBPACK_IMPORTED_MODULE_6__.VirtualizedListFactory)({
+    IndicatorSeparator: null,
+    DropdownIndicator: _dropdown_indicator__WEBPACK_IMPORTED_MODULE_2__.DropdownIndicator,
+    ClearIndicator: _clear_indicator__WEBPACK_IMPORTED_MODULE_1__.ClearIndicator,
+    MenuList: props.virtualized ? (0,_util_virtualized_list__WEBPACK_IMPORTED_MODULE_0__.VirtualizedListFactory)({
       optionHeight: props.optionHeight,
       defaultValue: props.defaultValue,
       formatOptionLabel: props.formatOptionLabel,
-      Option: components.Option
-    });
+      Option: (_props$components$Opt = (_props$components = props.components) === null || _props$components === void 0 ? void 0 : _props$components.Option) !== null && _props$components$Opt !== void 0 ? _props$components$Opt : _option__WEBPACK_IMPORTED_MODULE_5__.Option
+    }) : _menu_list__WEBPACK_IMPORTED_MODULE_4__.MenuList,
+    Group: _group__WEBPACK_IMPORTED_MODULE_3__.Group,
+    Option: _option__WEBPACK_IMPORTED_MODULE_5__.Option
+  }, props.components);
+  if (props.autosize === false && props.multiselect && components.ValueContainer === undefined) {
+    components.ValueContainer = _value_container__WEBPACK_IMPORTED_MODULE_6__.ValueContainer;
   }
-  if (props.autosize === false && props.multiselect) components.ValueContainer = _value_container__WEBPACK_IMPORTED_MODULE_5__.ValueContainer;
   return components;
 };
 
@@ -37802,7 +37768,7 @@ var buildComponents = function buildComponents(props) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   ClearIndicator: () => (/* binding */ ClearIndicator)
 /* harmony export */ });
 /* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @icons */ "./assets/icons/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
@@ -37833,7 +37799,6 @@ var ClearIndicator = function ClearIndicator(props) {
     href: "#".concat(ic.id)
   }));
 };
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ClearIndicator);
 
 /***/ }),
 
@@ -38080,7 +38045,7 @@ var getComponent = function getComponent(opt) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   DropdownIndicator: () => (/* binding */ DropdownIndicator)
 /* harmony export */ });
 /* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @icons */ "./assets/icons/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
@@ -38113,7 +38078,6 @@ var DropdownIndicator = function DropdownIndicator(props) {
     href: "#".concat(ic.id)
   }));
 };
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DropdownIndicator);
 
 /***/ }),
 
@@ -44491,6 +44455,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   WHITE_SPACES: () => (/* binding */ WHITE_SPACES)
 /* harmony export */ });
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
 var WHITE_SPACES = ['normal', 'nowrap', 'pre', 'pre-wrap', 'pre-line', 'break-spaces'];
 
 /***/ }),
@@ -44980,9 +44948,9 @@ var StyledTypography = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
 
 /***/ }),
 
-/***/ "./src/util/class-names.js":
+/***/ "./src/util/class_names.js":
 /*!*********************************!*\
-  !*** ./src/util/class-names.js ***!
+  !*** ./src/util/class_names.js ***!
   \*********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -45060,9 +45028,9 @@ var isExoticComponent = function isExoticComponent(component) {
 
 /***/ }),
 
-/***/ "./src/util/get-props.js":
+/***/ "./src/util/get_props.js":
 /*!*******************************!*\
-  !*** ./src/util/get-props.js ***!
+  !*** ./src/util/get_props.js ***!
   \*******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -45217,9 +45185,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   isGroupHeader: () => (/* reexport safe */ _getters__WEBPACK_IMPORTED_MODULE_3__.isGroupHeader),
 /* harmony export */   withUserStyles: () => (/* reexport safe */ _with_user_styles__WEBPACK_IMPORTED_MODULE_5__.withUserStyles)
 /* harmony export */ });
-/* harmony import */ var _class_names__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./class-names */ "./src/util/class-names.js");
+/* harmony import */ var _class_names__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./class_names */ "./src/util/class_names.js");
 /* harmony import */ var _flex_renderer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./flex_renderer */ "./src/util/flex_renderer.js");
-/* harmony import */ var _get_props__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./get-props */ "./src/util/get-props.js");
+/* harmony import */ var _get_props__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./get_props */ "./src/util/get_props.js");
 /* harmony import */ var _getters__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./getters */ "./src/util/getters.js");
 /* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./virtualized_list */ "./src/util/virtualized_list.js");
 /* harmony import */ var _with_user_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./with_user_styles */ "./src/util/with_user_styles.js");
@@ -45457,18 +45425,19 @@ var VirtualizedListRowRenderer = function VirtualizedListRowRenderer(_ref7) {
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, {
       key: key,
       style: style,
-      data: thisProps.data,
       isVisible: isVisible,
       isScrolling: isScrolling,
       optionHeight: optionHeight,
+      formatOptionLabel: formatOptionLabel,
+      data: thisProps.data,
       isDisabled: thisProps.isDisabled,
       isFocused: thisProps.isFocused,
       isSelected: thisProps.isSelected,
       className: thisProps.className,
       cx: thisProps.cx,
+      getStyles: thisProps.getStyles,
       innerRef: thisProps.innerRef,
       innerProps: thisProps.innerProps,
-      formatOptionLabel: formatOptionLabel,
       tag: "div"
     }, thisProps.children));
   };