@itcase/ui 1.2.4 → 1.2.5

package/dist/components/Select.js

@@ -1,7 +1,8 @@
-import React, { useMemo, useRef, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { _ as __assign } from '../tslib.es6-S-VPg1Cw.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
 import { I as Icon } from '../Icon-fTLfvlsK.js';
+import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
@@ -9,7 +10,6 @@ import { T as Text } from '../Text-CG3xPG27.js';
 import { B as Badge } from '../Badge-CrhdvxY6.js';
 import { G as Group } from '../Group-BXfLh7AZ.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import 'react/jsx-runtime';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/camelCase';
@@ -17,10 +17,10 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../Link-Bqu5amIb.js';
-import '../tslib.es6-S-VPg1Cw.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';
@@ -28,1260 +28,292 @@ import 'lodash/castArray';
 // For use memo need to check "ClearIndicator" props
 // const SelectClearIndicator = React.memo(
 function SelectClearIndicator(props) {
-  const {
-    children
-  } = props;
-  const {
-    clearIcon,
-    clearIconFill
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.ClearIndicator, props, clearIcon ? /*#__PURE__*/React.createElement(Icon, {
-    iconFill: clearIconFill,
-    SvgImage: clearIcon
-  }) : children);
+    var children = props.children;
+    var _a = props.selectProps, clearIcon = _a.clearIcon, clearIconFill = _a.clearIconFill;
+    return (jsx(components.ClearIndicator, __assign({}, props, { children: clearIcon ? jsx(Icon, { iconFill: clearIconFill, SvgImage: clearIcon }) : children })));
 }
-//   ,
-//   function arePropsEqual(oldProps, newProps) {
-//     const oldClearIcon = oldProps.selectProps.clearIcon
-//     const oldClearIconFill = oldProps.selectProps.clearIconFill
-
-//     const newClearIcon = newProps.selectProps.clearIcon
-//     const newClearIconFill = newProps.selectProps.clearIconFill
 
-//     const isClearIconSame = oldClearIcon === newClearIcon
-//     const isClearIconFillSame = oldClearIconFill === newClearIconFill
-
-//     return isClearIconSame && isClearIconFillSame
-//   },
-// )
-
-SelectClearIndicator.propTypes = {
-  children: PropTypes.any,
-  selectProps: PropTypes.shape({
-    clearIcon: PropTypes.string,
-    clearIconFill: PropTypes.string
-  })
-};
-SelectClearIndicator.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectClearIndicator",
-  "props": {
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "clearIcon": {
-            "name": "string",
-            "required": false
-          },
-          "clearIconFill": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    }
-  }
-};
-
-const SelectControl = props => {
-  const {
-    before,
-    after,
-    inputFill,
-    inputShape,
-    inputBorderColor,
-    inputBorderColorHover
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, before, /*#__PURE__*/React.createElement(components.Control, Object.assign({}, props, {
-    className: clsx('select__control', inputFill, inputShape, inputBorderColor && `border-color_${inputBorderColor}`, inputBorderColorHover && `border-color_hover_${inputBorderColorHover}`)
-  })), after);
-};
-SelectControl.propTypes = {
-  selectProps: PropTypes.shape({
-    inputFill: PropTypes.string,
-    inputShape: PropTypes.string,
-    set: PropTypes.string
-  })
-};
-SelectControl.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectControl",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "inputFill": {
-            "name": "string",
-            "required": false
-          },
-          "inputShape": {
-            "name": "string",
-            "required": false
-          },
-          "set": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    }
-  }
+var SelectControl = function (props) {
+    var _a = props.selectProps, after = _a.after, before = _a.before, inputBorderColor = _a.inputBorderColor, inputBorderColorHover = _a.inputBorderColorHover, inputFill = _a.inputFill, inputShape = _a.inputShape;
+    return (jsxs(React.Fragment, { children: [before, jsx(components.Control, __assign({}, props, { className: clsx('select__control', inputFill, inputShape, inputBorderColor && "border-color_".concat(inputBorderColor), inputBorderColorHover && "border-color_hover_".concat(inputBorderColorHover)) })), after] }));
 };
 
 // For use memo need to check "DropdownIndicator" props
 // const SelectDropdownIndicator = React.memo(
-function SelectDropdownIndicator(props) {
-  const {
-    children
-  } = props;
-  const {
-    dropdownFillHover,
-    dropdownIcon,
-    dropdownIconFill,
-    dropdownIconShape
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React.createElement(Icon, {
-    fillHover: dropdownFillHover,
-    iconFill: dropdownIconFill,
-    shape: dropdownIconShape,
-    SvgImage: dropdownIcon
-  }) : children);
-}
-// ,
-//   function arePropsEqual(oldProps, newProps) {
-//     const oldDropdownFillHover = oldProps.selectProps.dropdownFillHover
-//     const oldDropdownIcon = oldProps.selectProps.dropdownIcon
-//     const oldDropdownIconFill = oldProps.selectProps.dropdownIconFill
-//     const oldDropdownIconShape = oldProps.selectProps.dropdownIconShape
-
-//     const newDropdownFillHover = newProps.selectProps.dropdownFillHover
-//     const newDropdownIcon = newProps.selectProps.dropdownIcon
-//     const newDropdownIconFill = newProps.selectProps.dropdownIconFill
-//     const newDropdownIconShape = newProps.selectProps.dropdownIconShape
-
-//     const isDropdownFillHoverSame = oldDropdownFillHover === newDropdownFillHover
-//     const isDropdownIconSame = oldDropdownIcon === newDropdownIcon
-//     const isDropdownIconFillSame = oldDropdownIconFill === newDropdownIconFill
-//     const isDropdownIconShapeSame = oldDropdownIconShape === newDropdownIconShape
-
-//     return (
-//       isDropdownFillHoverSame &&
-//       isDropdownIconSame &&
-//       isDropdownIconFillSame &&
-//       isDropdownIconShapeSame
-//     )
-//   },
-// )
-
-SelectDropdownIndicator.propTypes = {
-  children: PropTypes.any,
-  selectProps: PropTypes.shape({
-    // "dropdownIcon" is SvgImage(file.svg)
-    dropdownFillHover: PropTypes.string,
-    dropdownIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-    dropdownIconFill: PropTypes.string,
-    dropdownIconShape: PropTypes.string
-  })
-};
-SelectDropdownIndicator.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectDropdownIndicator",
-  "props": {
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "dropdownFillHover": {
-            "name": "string",
-            "required": false
-          },
-          "dropdownIcon": {
-            "name": "union",
-            "value": [{
-              "name": "func"
-            }, {
-              "name": "element"
-            }],
-            "required": false
-          },
-          "dropdownIconFill": {
-            "name": "string",
-            "required": false
-          },
-          "dropdownIconShape": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    }
-  }
+var SelectDropdownIndicator = function (props) {
+    var children = props.children;
+    var _a = props.selectProps, dropdownFillHover = _a.dropdownFillHover, dropdownIcon = _a.dropdownIcon, dropdownIconFill = _a.dropdownIconFill, dropdownIconShape = _a.dropdownIconShape;
+    return (jsx(components.DropdownIndicator, __assign({}, props, { children: dropdownIcon ? (jsx(Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) })));
 };
 
-const SelectGroupHeading = props => {
-  const {
-    headingFill,
-    headingFillHover,
-    headingTextWeight,
-    headingTextSize,
-    headingTextColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.GroupHeading, Object.assign({}, props, {
-    className: clsx('select__menu-group-heading', headingFill, headingFillHover)
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: headingTextSize,
-    textWeight: headingTextWeight,
-    textColor: headingTextColor
-  }, props.data.label));
-};
-SelectGroupHeading.propTypes = {
-  selectProps: PropTypes.shape({})
-};
-SelectGroupHeading.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectGroupHeading",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {}
-      },
-      "required": false
-    }
-  }
+var SelectGroupHeading = function (props) {
+    var _a = props.selectProps, headingFill = _a.headingFill, headingFillHover = _a.headingFillHover, headingTextColor = _a.headingTextColor, headingTextSize = _a.headingTextSize, headingTextWeight = _a.headingTextWeight;
+    return (jsx(components.GroupHeading, __assign({}, props, { className: clsx('select__menu-group-heading', headingFill, headingFillHover), children: jsx(Text, { size: headingTextSize, textColor: headingTextColor, textWeight: headingTextWeight, children: props.data.label }) })));
 };
 
-const SelectIndicatorsContainer = props => {
-  const {
-    badgeAppearance,
-    badgeSize,
-    badgeTextSize,
-    showBadge,
-    value
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React.createElement(Badge, {
-    appearance: badgeAppearance,
-    size: badgeSize,
-    textSize: badgeTextSize,
-    value: value.length
-  }) : null, props.children);
-};
-SelectIndicatorsContainer.propTypes = {};
-SelectIndicatorsContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectIndicatorsContainer"
+var SelectIndicatorsContainer = function (props) {
+    var _a = props.selectProps, badgeAppearance = _a.badgeAppearance, badgeSize = _a.badgeSize, badgeTextSize = _a.badgeTextSize, showBadge = _a.showBadge, value = _a.value;
+    return (jsxs(components.IndicatorsContainer, __assign({}, props, { children: [showBadge &&
+                value &&
+                // @ts-expect-error
+                (value === null || value === void 0 ? void 0 : value.length) > 0 ? (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
+                // @ts-expect-error
+                value: value.length.toString() })) : null, props.children] })));
 };
 
-const SelectInput = props => {
-  const {
-    inputTextSize,
-    inputTextColor,
-    inputCaretColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.Input, Object.assign({}, props, {
-    className: clsx(inputTextSize && `text_size_${inputTextSize}`, inputTextColor && `text-color_${inputTextColor}`, inputCaretColor && `caret-color_${inputCaretColor}`)
-  }));
-};
-SelectInput.propTypes = {
-  selectProps: PropTypes.shape({
-    inputTextSize: PropTypes.string,
-    inputTextColor: PropTypes.string,
-    inputCaretColor: PropTypes.string
-  }),
-  children: PropTypes.any
-};
-SelectInput.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectInput",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "inputTextSize": {
-            "name": "string",
-            "required": false
-          },
-          "inputTextColor": {
-            "name": "string",
-            "required": false
-          },
-          "inputCaretColor": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    }
-  }
+var SelectInput = function (props) {
+    var _a = props.selectProps, inputCaretColor = _a.inputCaretColor, inputTextColor = _a.inputTextColor, inputTextSize = _a.inputTextSize;
+    return (jsx(components.Input, __assign({}, props, { className: clsx(inputTextSize && "text_size_".concat(inputTextSize), inputTextColor && "text-color_".concat(inputTextColor), inputCaretColor && "caret-color_".concat(inputCaretColor)) })));
 };
 
-const SelectLoadingIndicator = props => {
-  const {
-    loadingIndicator
-  } = props.selectProps;
-  // Original indicator
-  // <components.LoadingIndicator {...props}>
-  // </components.LoadingIndicator>
-  return loadingIndicator;
-};
-SelectLoadingIndicator.propTypes = {
-  selectProps: PropTypes.shape({})
+var SelectLoadingIndicator = function (props) {
+    var loadingIndicator = props.selectProps.loadingIndicator;
+    // Original indicator
+    // <components.LoadingIndicator {...props}>
+    // </components.LoadingIndicator>
+    return loadingIndicator;
 };
 
-const SelectMenu = props => {
-  const {
-    elevation,
-    menuAfter,
-    menuBefore
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.Menu, Object.assign({}, props, {
-    className: clsx(elevation && `elevation_${elevation}`)
-  }), menuBefore, props.selectProps.fetchingData ? /*#__PURE__*/React.createElement("span", {
-    className: "fetching"
-  }, "Fetching data...") : /*#__PURE__*/React.createElement(React.Fragment, null, props.children), menuAfter);
-};
-SelectMenu.propTypes = {
-  selectProps: PropTypes.shape({
-    fetchingData: PropTypes.any,
-    set: PropTypes.string
-  }),
-  children: PropTypes.any
-};
-SelectMenu.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectMenu",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "fetchingData": {
-            "name": "any",
-            "required": false
-          },
-          "set": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    }
-  }
+var SelectMenu = function (props) {
+    var _a = props.selectProps, elevation = _a.elevation, menuAfter = _a.menuAfter, menuBefore = _a.menuBefore;
+    return (jsxs(components.Menu, __assign({}, props, { className: clsx(elevation && "elevation_".concat(elevation)), children: [menuBefore, props.selectProps.fetchingData ? (jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsx(React.Fragment, { children: props.children })), menuAfter] })));
 };
 
-const SelectMultiValueContainer = props => {
-  const {
-    multipleItemFill,
-    multipleItemFillHover
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.MultiValueContainer, props, /*#__PURE__*/React.createElement(Group, {
-    className: "select__multi-value-wrapper",
-    direction: "horizontal",
-    alignItems: "center",
-    gap: "4",
-    fill: multipleItemFill,
-    fillHover: multipleItemFillHover
-  }, props.children));
-};
-SelectMultiValueContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectMultiValueContainer"
+var SelectMultiValueContainer = function (props) {
+    var _a = props.selectProps, multipleItemFill = _a.multipleItemFill, multipleItemFillHover = _a.multipleItemFillHover;
+    return (jsx(components.MultiValueContainer, __assign({}, props, { children: jsx(Group, { className: "select__multi-value-wrapper", fill: multipleItemFill, fillHover: multipleItemFillHover, alignItems: "center", direction: "horizontal", gap: "4", children: props.children }) })));
 };
 
-const SelectMultiValueLabel = props => {
-  const {
-    multipleItemTextSize,
-    multipleItemTextColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.MultiValueLabel, props, /*#__PURE__*/React.createElement(Text, {
-    size: multipleItemTextSize,
-    textColor: multipleItemTextColor
-  }, props.data.label));
-};
-SelectMultiValueLabel.propTypes = {};
-SelectMultiValueLabel.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectMultiValueLabel"
+var SelectMultiValueLabel = function (props) {
+    var _a = props.selectProps, multipleItemTextColor = _a.multipleItemTextColor, multipleItemTextSize = _a.multipleItemTextSize;
+    return (jsx(components.MultiValueLabel, __assign({}, props, { children: props.data && (jsx(Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) })));
 };
 
-const SelectMultiValueRemove = props => {
-  const {
-    multipleItemIcon,
-    multipleItemIconFill
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.MultiValueRemove, props, /*#__PURE__*/React.createElement(Icon, {
-    SvgImage: multipleItemIcon,
-    iconFill: multipleItemIconFill
-  }));
-};
-SelectMultiValueRemove.propTypes = {};
-SelectMultiValueRemove.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectMultiValueRemove"
+var SelectMultiValueRemove = function (props) {
+    var _a = props.selectProps, multipleItemIcon = _a.multipleItemIcon, multipleItemIconFill = _a.multipleItemIconFill;
+    return (jsxs(components.MultiValueRemove, __assign({}, props, { children: [jsx(Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }), jsx(Select, { defaultValue: [{}], options: [
+                    {
+                        label: 'vs',
+                        options: [{ label: '' }],
+                    },
+                    {},
+                ] })] })));
 };
 
-const SelectNoOptions = props => {
-  const {
-    inputValue,
-    optionFill,
-    optionBorder,
-    optionBorderType,
-    noOptionsTextSize,
-    noOptionsTextColor,
-    noOptionsText,
-    noOptionsSearchText
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, Object.assign({}, props, {
-    className: clsx(optionFill, optionBorder, optionBorderType)
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: noOptionsTextSize,
-    textColor: noOptionsTextColor
-  }, inputValue && noOptionsSearchText ? noOptionsSearchText : noOptionsText));
-};
-SelectNoOptions.propTypes = {
-  selectProps: PropTypes.shape({
-    noOptionsTextSize: PropTypes.string,
-    noOptionsTextColor: PropTypes.string,
-    noOptionsText: PropTypes.string
-  }),
-  children: PropTypes.any
-};
-SelectNoOptions.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectNoOptions",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "noOptionsTextSize": {
-            "name": "string",
-            "required": false
-          },
-          "noOptionsTextColor": {
-            "name": "string",
-            "required": false
-          },
-          "noOptionsText": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    }
-  }
+var SelectNoOptions = function (props) {
+    var _a = props.selectProps, inputValue = _a.inputValue, noOptionsSearchText = _a.noOptionsSearchText, noOptionsText = _a.noOptionsText, noOptionsTextColor = _a.noOptionsTextColor, noOptionsTextSize = _a.noOptionsTextSize, optionBorder = _a.optionBorder, optionBorderType = _a.optionBorderType, optionFill = _a.optionFill;
+    return (jsx(components.NoOptionsMessage, __assign({}, props, { className: clsx(optionFill, optionBorder, optionBorderType), children: jsx(Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText ? noOptionsSearchText : noOptionsText }) })));
 };
 
-const SelectOption = props => {
-  const {
-    label,
-    isSelected,
-    data
-  } = props;
-  const {
-    showDivider,
-    dividerDirection,
-    dividerFill,
-    dividerSize,
-    menuItemSize,
-    optionFill,
-    optionFillHover,
-    optionBorder,
-    optionBorderType,
-    optionSelected,
-    optionTextSize,
-    optionShape,
-    optionTextColor,
-    optionBefore,
-    optionAfter
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.Option, Object.assign({}, props, {
-    className: clsx('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
-  }), optionBefore, /*#__PURE__*/React.createElement(Text, {
-    className: "select__menu-list-item_option",
-    size: optionTextSize,
-    textColor: optionTextColor
-  }, label), isSelected && /*#__PURE__*/React.createElement("div", {
-    className: "select__menu-list-item_selected"
-  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React.createElement(Divider, {
-    direction: dividerDirection,
-    fill: dividerFill,
-    size: dividerSize,
-    width: "fill"
-  }));
-};
-SelectOption.propTypes = {
-  selectProps: PropTypes.shape({
-    optionFill: PropTypes.string,
-    optionTextSize: PropTypes.string,
-    optionTextColor: PropTypes.string,
-    optionShape: PropTypes.string,
-    optionBefore: PropTypes.any,
-    optionAfter: PropTypes.any
-  }),
-  label: PropTypes.string,
-  isSelected: PropTypes.any
-};
-SelectOption.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectOption",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "optionFill": {
-            "name": "string",
-            "required": false
-          },
-          "optionTextSize": {
-            "name": "string",
-            "required": false
-          },
-          "optionTextColor": {
-            "name": "string",
-            "required": false
-          },
-          "optionShape": {
-            "name": "string",
-            "required": false
-          },
-          "optionBefore": {
-            "name": "any",
-            "required": false
-          },
-          "optionAfter": {
-            "name": "any",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "label": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "isSelected": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    }
-  }
+var SelectOption = function (props) {
+    var isSelected = props.isSelected, label = props.label;
+    var _a = props.selectProps, dividerDirection = _a.dividerDirection, dividerFill = _a.dividerFill, dividerSize = _a.dividerSize, menuItemSize = _a.menuItemSize, optionAfter = _a.optionAfter, optionBefore = _a.optionBefore, optionBorder = _a.optionBorder, optionBorderType = _a.optionBorderType, optionFill = _a.optionFill, optionFillHover = _a.optionFillHover, optionSelected = _a.optionSelected, optionShape = _a.optionShape, optionTextColor = _a.optionTextColor, optionTextSize = _a.optionTextSize, showDivider = _a.showDivider;
+    return (jsxs(components.Option, __assign({}, props, { className: clsx('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && "select__menu-list-item_size_".concat(menuItemSize), optionFill, optionBorder, optionBorderType, optionFillHover, optionShape), children: [optionBefore, jsx(Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, children: label }), isSelected && jsx("div", { className: "select__menu-list-item_selected", children: optionSelected }), optionAfter, showDivider && (jsx(Divider, { width: "fill", fill: dividerFill, direction: dividerDirection, size: dividerSize }))] })));
 };
 
-const SelectPlaceholder = props => {
-  const {
-    placeholderTextSize,
-    placeholderTextColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.Placeholder, props, /*#__PURE__*/React.createElement(Text, {
-    size: placeholderTextSize,
-    textColor: placeholderTextColor
-  }, props.children));
-};
-SelectPlaceholder.propTypes = {
-  selectProps: PropTypes.shape({
-    placeholderTextSize: PropTypes.string,
-    placeholderTextColor: PropTypes.string
-  }),
-  children: PropTypes.any
-};
-SelectPlaceholder.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectPlaceholder",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "placeholderTextSize": {
-            "name": "string",
-            "required": false
-          },
-          "placeholderTextColor": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    }
-  }
+var SelectPlaceholder = function (props) {
+    var _a = props.selectProps, placeholderTextColor = _a.placeholderTextColor, placeholderTextSize = _a.placeholderTextSize;
+    return (jsx(components.Placeholder, __assign({}, props, { children: jsx(Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) })));
 };
 
-const SelectSingleValue = props => {
-  const {
-    data
-  } = props;
-  const {
-    inputTextSize,
-    inputTextColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.SingleValue, props, data.optionBefore, /*#__PURE__*/React.createElement(Text, {
-    size: inputTextSize,
-    textColor: inputTextColor
-  }, props.children), data.optionAfter);
-};
-SelectSingleValue.propTypes = {
-  selectProps: PropTypes.shape({
-    inputTextSize: PropTypes.string,
-    inputTextColor: PropTypes.string
-  }),
-  children: PropTypes.any,
-  data: PropTypes.object
-};
-SelectSingleValue.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectSingleValue",
-  "props": {
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "inputTextSize": {
-            "name": "string",
-            "required": false
-          },
-          "inputTextColor": {
-            "name": "string",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "data": {
-      "description": "",
-      "type": {
-        "name": "object"
-      },
-      "required": false
-    }
-  }
+var SelectSingleValue = function (props) {
+    var data = props.data;
+    var _a = props.selectProps, inputTextColor = _a.inputTextColor, inputTextSize = _a.inputTextSize;
+    return (jsxs(components.SingleValue, __assign({}, props, { children: [data && data.optionBefore, jsx(Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] })));
 };
 
-const SelectValueContainer = props => {
-  const {
-    inputBefore,
-    inputAfter
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.ValueContainer, props, inputBefore, props.children, inputAfter);
+var SelectValueContainer = function (props) {
+    var _a = props.selectProps, inputAfter = _a.inputAfter, inputBefore = _a.inputBefore;
+    return (jsxs(components.ValueContainer, __assign({}, props, { children: [inputBefore, props.children, inputAfter] })));
 };
-SelectValueContainer.propTypes = {
-  children: PropTypes.any,
-  selectProps: PropTypes.shape({
-    inputBefore: PropTypes.any,
-    inputAfter: PropTypes.any
-  })
-};
-SelectValueContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectValueContainer",
-  "props": {
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "selectProps": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "inputBefore": {
-            "name": "any",
-            "required": false
-          },
-          "inputAfter": {
-            "name": "any",
-            "required": false
-          }
-        }
-      },
-      "required": false
-    }
-  }
-};
-
-const SelectContainer = /*#__PURE__*/React.forwardRef(function SelectContainer(props, ref) {
-  const clearStyle = useMemo(() => new Proxy({}, {
-    get: (target, propKey) => () => {}
-  }), []);
-  const {
-    appearance,
-    className,
-    after,
-    before,
-    badgeAppearance,
-    badgeSize,
-    badgeTextSize,
-    hideSelectedOptions,
-    menuAfter,
-    menuBefore,
-    clearIcon,
-    clearIconFill,
-    closeMenuOnSelect,
-    showDivider,
-    dividerDirection,
-    dividerFill,
-    dividerSize,
-    dropdownFillHover,
-    dropdownIcon,
-    dropdownIconFill,
-    dropdownIconShape,
-    multipleItemIcon,
-    multipleItemIconFill,
-    multipleItemFill,
-    multipleItemFillHover,
-    hideValueContainer,
-    filterOption,
-    initialValue,
-    inputAfter,
-    inputBefore,
-    instanceId,
-    isClearable,
-    isCreatable,
-    isDisabled,
-    isLoading,
-    isMulti,
-    isSearchable,
-    loadingMessage,
-    menuItemSize,
-    noOptionsText,
-    noOptionsSearchText,
-    openMenuOnClick,
-    options,
-    optionBefore,
-    optionAfter,
-    optionSelected,
-    elevation,
-    placeholder,
-    placeholderTextSize,
-    placeholderTextColor,
-    set,
-    showBadge,
-    value,
-    onChange,
-    onInputChange
-  } = props;
-  const defaultRef = useRef(null);
-  const selectRef = ref || defaultRef;
 
-  // React-select wai function as "loadingMessage" property
-  const getLoadingMessage = useCallback(params => {
-    // const { inputValue } = params
-    return loadingMessage;
-  }, [loadingMessage]);
-  const borderColorClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'select_shape_',
-    propsKey: 'shape'
-  });
-  const sizeClass = useDeviceTargetClass(props, {
-    prefix: 'select_size_',
-    propsKey: 'size'
-  });
-  const optionFillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'optionFill'
-  });
-  const optionFillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'optionFillHover'
-  });
-  const optionBorderClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'optionBorder'
-  });
-  const optionBorderTypeClass = useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'optionBorderType'
-  });
-  const optionTextSizeClass = useDeviceTargetClass(props, {
-    propsKey: 'optionTextSize'
-  });
-  const optionTextColorClass = useDeviceTargetClass(props, {
-    propsKey: 'optionTextColor'
-  });
-  const optionShapeClass = useDeviceTargetClass(props, {
-    propsKey: 'optionShape'
-  });
-  const inputFillClass = useDeviceTargetClass(props, {
-    prefix: 'select__control_fill_',
-    propsKey: 'inputFill'
-  });
-  const inputShapeClass = useDeviceTargetClass(props, {
-    prefix: 'select__control_shape_',
-    propsKey: 'inputShape'
-  });
-  const inputTextSizeClass = useDeviceTargetClass(props, {
-    propsKey: 'inputTextSize'
-  });
-  const inputTextColorClass = useDeviceTargetClass(props, {
-    propsKey: 'inputTextColor'
-  });
-  const multipleItemTextSizeClass = useDeviceTargetClass(props, {
-    propsKey: 'multipleItemTextSize'
-  });
-  const multipleItemTextColorClass = useDeviceTargetClass(props, {
-    propsKey: 'multipleItemTextColor'
-  });
-  const inputBorderColorClass = useDeviceTargetClass(props, {
-    propsKey: 'inputBorderColor'
-  });
-  const inputBorderColorHoverClass = useDeviceTargetClass(props, {
-    propsKey: 'inputBorderColorHover'
-  });
-  const noOptionsTextSizeClass = useDeviceTargetClass(props, {
-    propsKey: 'noOptionsTextSize'
-  });
-  const noOptionsTextColorClass = useDeviceTargetClass(props, {
-    propsKey: 'noOptionsTextColor'
-  });
-  const inputCaretColorClass = useDeviceTargetClass(props, {
-    propsKey: 'inputCaretColor'
-  });
-  const headingFillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'headingFill'
-  });
-  const headingFillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'headingFillHover'
-  });
-  const headingTextSizeClass = useDeviceTargetClass(props, {
-    propsKey: 'headingTextSize'
-  });
-  const headingTextWeightClass = useDeviceTargetClass(props, {
-    propsKey: 'headingTextWeight'
-  });
-  const headingTextColorClass = useDeviceTargetClass(props, {
-    propsKey: 'headingTextColor'
-  });
-  const SelectComponent = useMemo(() => isCreatable ? CreatableSelect : Select, [isCreatable]);
-  useEffect(() => {
-    const onClickOutside = event => {
-      const isTargetSelectContainer = event.target.hasClass && event.target.hasClass('select_state_hide-value-container');
-      const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
-      if (!isTargetSelectContainer && !isTargetInsideController) {
-        selectRef.current?.onInputBlur();
-      }
-    };
-    if (hideValueContainer) {
-      document.addEventListener('click', onClickOutside);
-    }
-    return () => {
-      if (hideValueContainer) {
-        document.removeEventListener('click', onClickOutside);
-      }
-    };
-  }, []);
-  const selectAppearanceItem = selectConfig.appearance[appearance] || {};
-  return /*#__PURE__*/React.createElement(SelectComponent, {
-    after: after,
-    badgeAppearance: badgeAppearance,
-    badgeSize: badgeSize,
-    badgeTextSize: badgeTextSize,
-    before: before,
-    className: clsx(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass || selectAppearanceItem.size && `select_size_${selectAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
-    classNamePrefix: "select",
-    clearIcon: clearIcon,
-    clearIconFill: clearIconFill,
-    closeMenuOnSelect: closeMenuOnSelect ?? false,
-    components: {
-      Control: SelectControl,
-      IndicatorsContainer: SelectIndicatorsContainer,
-      ClearIndicator: SelectClearIndicator,
-      DropdownIndicator: SelectDropdownIndicator,
-      IndicatorSeparator: () => null,
-      Input: SelectInput,
-      Menu: SelectMenu,
-      MultiValueContainer: SelectMultiValueContainer,
-      MultiValueRemove: SelectMultiValueRemove,
-      MultiValueLabel: SelectMultiValueLabel,
-      Option: SelectOption,
-      SingleValue: SelectSingleValue,
-      Placeholder: SelectPlaceholder,
-      ValueContainer: SelectValueContainer,
-      NoOptionsMessage: SelectNoOptions,
-      GroupHeading: SelectGroupHeading,
-      LoadingIndicator: SelectLoadingIndicator
-    },
-    defaultValue: initialValue,
-    dividerDirection: dividerDirection,
-    dividerFill: dividerFill,
-    dividerSize: dividerSize,
-    dropdownFillHover: dropdownFillHover,
-    dropdownIcon: dropdownIcon,
-    dropdownIconFill: dropdownIconFill,
-    dropdownIconShape: dropdownIconShape,
-    elevation: elevation || selectAppearanceItem.elevation,
-    filterOption: filterOption,
-    headingFill: headingFillClass,
-    headingFillHover: headingFillHoverClass,
-    headingTextColor: headingTextColorClass,
-    headingTextSize: headingTextSizeClass,
-    headingTextWeight: headingTextWeightClass,
-    hideSelectedOptions: hideSelectedOptions,
-    inputAfter: inputAfter,
-    inputBefore: inputBefore,
-    instanceId: instanceId,
-    inputBorderColor: inputBorderColorClass || selectAppearanceItem.inputBorderColor && selectAppearanceItem.inputBorderColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputBorderColorHover: inputBorderColorHoverClass || selectAppearanceItem.inputBorderColorHover && selectAppearanceItem.inputBorderColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputCaretColor: inputCaretColorClass,
-    inputFill: inputFillClass || selectAppearanceItem.inputFill && `select__control_fill_${selectAppearanceItem.inputFill}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputShape: inputShapeClass || selectAppearanceItem.inputShape && `select__control_shape_${selectAppearanceItem.inputShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    inputTextColor: inputTextColorClass || selectAppearanceItem.inputTextColor,
-    inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize,
-    isClearable: isClearable,
-    isDisabled: isDisabled,
-    isLoading: isLoading,
-    isMulti: isMulti,
-    isSearchable: isSearchable,
-    loadingMessage: getLoadingMessage,
-    menuAfter: menuAfter,
-    menuBefore: menuBefore,
-    menuItemSize: menuItemSize,
-    multipleItemFill: multipleItemFill,
-    multipleItemFillHover: multipleItemFillHover,
-    multipleItemIcon: multipleItemIcon,
-    multipleItemIconFill: multipleItemIconFill,
-    multipleItemTextColor: multipleItemTextColorClass,
-    multipleItemTextSize: multipleItemTextSizeClass,
-    noOptionBorder: optionBorderClass,
-    noOptionBorderType: optionBorderTypeClass,
-    noOptionsFill: optionFillClass,
-    noOptionsSearchText: noOptionsSearchText,
-    noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText,
-    noOptionsTextColor: noOptionsTextColorClass || selectAppearanceItem.noOptionsTextColor,
-    noOptionsTextSize: noOptionsTextSizeClass || selectAppearanceItem.noOptionsTextSize,
-    openMenuOnClick: openMenuOnClick,
-    optionAfter: optionAfter,
-    optionBefore: optionBefore,
-    optionBorder: optionBorderClass,
-    optionBorderType: optionBorderTypeClass,
-    optionFill: optionFillClass || selectAppearanceItem.optionFill && `fill_${selectAppearanceItem.optionFill}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    optionFillHover: optionFillHoverClass || selectAppearanceItem.optionFillHover && `fill_hover_${selectAppearanceItem.optionFillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    options: options,
-    optionSelected: optionSelected,
-    optionShape: optionShapeClass,
-    optionTextColor: optionTextColorClass || selectAppearanceItem.optionTextColor,
-    optionTextSize: optionTextSizeClass || selectAppearanceItem.optionTextSize,
-    placeholder: placeholder || selectAppearanceItem.placeholder,
-    placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor,
-    placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize,
-    ref: selectRef,
-    set: set,
-    showBadge: showBadge,
-    showDivider: showDivider,
-    styles: clearStyle,
-    value: value,
-    onChange: onChange,
-    onInputChange: onInputChange
-  });
+var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
+    // const clearStyle = useMemo(() => new Proxy({}, { get: (target, propKey) => () => {} }), [])
+    var clearStyle = useMemo(function () { return new Proxy({}, { get: function () { return function () { }; } }); }, []);
+    var elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, 
+    // @ts-expect-error // because there is a defaultValue
+    initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
+    var defaultRef = useRef(null);
+    var selectRef = ref || defaultRef;
+    // React-select wai function as "loadingMessage" property
+    // (params: { inputValue: string }) => {
+    var getLoadingMessage = useCallback(function () {
+        // const { inputValue } = params
+        return loadingMessage;
+    }, [loadingMessage]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'select_shape_',
+        propsKey: 'shape',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'select_size_',
+        propsKey: 'size',
+    });
+    var optionFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'optionFill',
+    });
+    var optionFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'optionFillHover',
+    });
+    var optionBorderClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'optionBorder',
+    });
+    var optionBorderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'optionBorderType',
+    });
+    var optionTextSizeClass = useDeviceTargetClass(props, {
+        propsKey: 'optionTextSize',
+    });
+    var optionTextColorClass = useDeviceTargetClass(props, {
+        propsKey: 'optionTextColor',
+    });
+    var optionShapeClass = useDeviceTargetClass(props, {
+        propsKey: 'optionShape',
+    });
+    var inputFillClass = useDeviceTargetClass(props, {
+        prefix: 'select__control_fill_',
+        propsKey: 'inputFill',
+    });
+    var inputShapeClass = useDeviceTargetClass(props, {
+        prefix: 'select__control_shape_',
+        propsKey: 'inputShape',
+    });
+    var inputTextSizeClass = useDeviceTargetClass(props, {
+        propsKey: 'inputTextSize',
+    });
+    var inputTextColorClass = useDeviceTargetClass(props, {
+        propsKey: 'inputTextColor',
+    });
+    var multipleItemTextSizeClass = useDeviceTargetClass(props, {
+        propsKey: 'multipleItemTextSize',
+    });
+    var multipleItemTextColorClass = useDeviceTargetClass(props, {
+        propsKey: 'multipleItemTextColor',
+    });
+    var inputBorderColorClass = useDeviceTargetClass(props, {
+        propsKey: 'inputBorderColor',
+    });
+    var inputBorderColorHoverClass = useDeviceTargetClass(props, {
+        propsKey: 'inputBorderColorHover',
+    });
+    var noOptionsTextSizeClass = useDeviceTargetClass(props, {
+        propsKey: 'noOptionsTextSize',
+    });
+    var noOptionsTextColorClass = useDeviceTargetClass(props, {
+        propsKey: 'noOptionsTextColor',
+    });
+    var inputCaretColorClass = useDeviceTargetClass(props, {
+        propsKey: 'inputCaretColor',
+    });
+    var headingFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'headingFill',
+    });
+    var headingFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'headingFillHover',
+    });
+    var headingTextSizeClass = useDeviceTargetClass(props, {
+        propsKey: 'headingTextSize',
+    });
+    var headingTextWeightClass = useDeviceTargetClass(props, {
+        propsKey: 'headingTextWeight',
+    });
+    var headingTextColorClass = useDeviceTargetClass(props, {
+        propsKey: 'headingTextColor',
+    });
+    var SelectComponent = useMemo(function () { return (isCreatable ? CreatableSelect : Select); }, [isCreatable]);
+    useEffect(function () {
+        // @ts-expect-error
+        var onClickOutside = function (event) {
+            var _a;
+            var isTargetSelectContainer = 
+            // maybe here ".contains()"?
+            event.target.hasClass && event.target.hasClass('select_state_hide-value-container');
+            var isTargetInsideController = selectRef.current.controlRef.contains(event.target);
+            if (!isTargetSelectContainer && !isTargetInsideController) {
+                (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.onInputBlur();
+            }
+        };
+        if (hideValueContainer) {
+            document.addEventListener('click', onClickOutside);
+        }
+        return function () {
+            if (hideValueContainer) {
+                document.removeEventListener('click', onClickOutside);
+            }
+        };
+    }, []);
+    var selectAppearanceItem = (appearance && selectConfig.appearance && selectConfig.appearance[appearance]) || {};
+    return (jsx(SelectComponent, { className: clsx(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass ||
+            (selectAppearanceItem.size &&
+                "select_size_".concat(selectAppearanceItem.size).replace(/([A-Z])/g, '-$1').toLowerCase()), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), ref: selectRef, after: after, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, before: before, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, closeMenuOnSelect: closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : false, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, elevation: elevation || selectAppearanceItem.elevation, filterOption: filterOption, headingFill: headingFillClass, headingFillHover: headingFillHoverClass, headingTextColor: headingTextColorClass, headingTextSize: headingTextSizeClass, headingTextWeight: headingTextWeightClass, hideSelectedOptions: hideSelectedOptions, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputTextColor: inputTextColorClass || selectAppearanceItem.inputTextColor, inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize, instanceId: instanceId, 
+        // @ts-expect-error
+        loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass, noOptionBorderType: optionBorderTypeClass, noOptionsFill: optionFillClass, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText, noOptionsTextColor: noOptionsTextColorClass || selectAppearanceItem.noOptionsTextColor, noOptionsTextSize: noOptionsTextSizeClass || selectAppearanceItem.noOptionsTextSize, openMenuOnClick: openMenuOnClick, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, options: options, optionSelected: optionSelected, optionShape: optionShapeClass, optionTextColor: optionTextColorClass || selectAppearanceItem.optionTextColor, optionTextSize: optionTextSizeClass || selectAppearanceItem.optionTextSize, placeholder: placeholder || selectAppearanceItem.placeholder, placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor, placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, components: {
+            ClearIndicator: SelectClearIndicator,
+            Control: SelectControl,
+            DropdownIndicator: SelectDropdownIndicator,
+            GroupHeading: SelectGroupHeading,
+            IndicatorsContainer: SelectIndicatorsContainer,
+            IndicatorSeparator: function () { return null; },
+            Input: SelectInput,
+            LoadingIndicator: SelectLoadingIndicator,
+            Menu: SelectMenu,
+            MultiValueContainer: SelectMultiValueContainer,
+            MultiValueLabel: SelectMultiValueLabel,
+            MultiValueRemove: SelectMultiValueRemove,
+            NoOptionsMessage: SelectNoOptions,
+            Option: SelectOption,
+            Placeholder: SelectPlaceholder,
+            SingleValue: SelectSingleValue,
+            ValueContainer: SelectValueContainer,
+        }, inputBorderColor: inputBorderColorClass ||
+            (selectAppearanceItem.inputBorderColor &&
+                selectAppearanceItem.inputBorderColor.replace(/([A-Z])/g, '-$1').toLowerCase()), inputBorderColorHover: inputBorderColorHoverClass ||
+            (selectAppearanceItem.inputBorderColorHover &&
+                selectAppearanceItem.inputBorderColorHover.replace(/([A-Z])/g, '-$1').toLowerCase()), inputFill: inputFillClass ||
+            (selectAppearanceItem.inputFill &&
+                "select__control_fill_".concat(selectAppearanceItem.inputFill)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), inputShape: inputShapeClass ||
+            (selectAppearanceItem.inputShape &&
+                "select__control_shape_".concat(selectAppearanceItem.inputShape)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), optionFill: optionFillClass ||
+            (selectAppearanceItem.optionFill &&
+                "fill_".concat(selectAppearanceItem.optionFill).replace(/([A-Z])/g, '-$1').toLowerCase()), optionFillHover: optionFillHoverClass ||
+            (selectAppearanceItem.optionFillHover &&
+                "fill_hover_".concat(selectAppearanceItem.optionFillHover)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), isClearable: isClearable, isDisabled: isDisabled, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable, set: set, onChange: onChange, onInputChange: onInputChange }));
 });
-SelectContainer.propTypes = {
-  className: PropTypes.string,
-  // "clearIcon" is SvgImage(file.svg)
-  clearIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-  clearIconFill: PropTypes.string,
-  closeMenuOnSelect: PropTypes.bool,
-  // "dropdownIcon" is SvgImage(file.svg)
-  dropdownFillHover: PropTypes.string,
-  dropdownIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-  dropdownIconFill: PropTypes.string,
-  dropdownIconShape: PropTypes.string,
-  filterOption: PropTypes.func,
-  initialValue: PropTypes.any,
-  inputAfter: PropTypes.any,
-  inputBefore: PropTypes.any,
-  isClearable: PropTypes.bool,
-  isSearchable: PropTypes.bool,
-  noOptionsText: PropTypes.string,
-  openMenuOnClick: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.object),
-  set: PropTypes.string,
-  onChange: PropTypes.func
-};
 SelectContainer.defaultProps = {
-  animationOpen: 'select_animation_open',
-  animationClose: 'select_animation_close'
-};
-SelectContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectContainer",
-  "props": {
-    "animationOpen": {
-      "defaultValue": {
-        "value": "'select_animation_open'",
-        "computed": false
-      },
-      "required": false
-    },
-    "animationClose": {
-      "defaultValue": {
-        "value": "'select_animation_close'",
-        "computed": false
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "clearIcon": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "func"
-        }, {
-          "name": "element"
-        }]
-      },
-      "required": false
-    },
-    "clearIconFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "closeMenuOnSelect": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "dropdownFillHover": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "dropdownIcon": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "func"
-        }, {
-          "name": "element"
-        }]
-      },
-      "required": false
-    },
-    "dropdownIconFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "dropdownIconShape": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "filterOption": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "initialValue": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "inputAfter": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "inputBefore": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "isClearable": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "isSearchable": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "noOptionsText": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "openMenuOnClick": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "options": {
-      "description": "",
-      "type": {
-        "name": "arrayOf",
-        "value": {
-          "name": "object"
-        }
-      },
-      "required": false
-    },
-    "set": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "onChange": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    }
-  }
+    // @ts-expect-error
+    animationClose: 'select_animation_close',
+    animationOpen: 'select_animation_open',
 };
 
-const selectConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    selectConfig.appearance = newComponent;
-  }
+var selectConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        selectConfig.appearance = newComponent;
+    },
 };
 
 export { SelectContainer as Select, SelectClearIndicator, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig };