@itcase/ui 1.2.4 → 1.2.5

package/dist/cjs/components/Select.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
 var Icon = require('../../Icon-Cq4hPF2D.js');
+var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
@@ -11,7 +12,6 @@ var Text = require('../../Text-_YhyTsQ1.js');
 var Badge = require('../../Badge-2JkquAEb.js');
 var Group = require('../../Group-Buo_BxGT.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
-require('react/jsx-runtime');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');
 require('lodash/camelCase');
@@ -19,10 +19,10 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
+require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../../Link-DQxoFKhI.js');
-require('../../tslib.es6-CKiUdo7p.js');
 require('../../Tooltip-DkTKx9n-.js');
 require('../../Title-zwP6c2U2.js');
 require('lodash/castArray');
@@ -30,1260 +30,292 @@ require('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(Select.components.ClearIndicator, props, clearIcon ? /*#__PURE__*/React.createElement(Icon.Icon, {
-    iconFill: clearIconFill,
-    SvgImage: clearIcon
-  }) : children);
+    var children = props.children;
+    var _a = props.selectProps, clearIcon = _a.clearIcon, clearIconFill = _a.clearIconFill;
+    return (jsxRuntime.jsx(Select.components.ClearIndicator, tslib_es6.__assign({}, props, { children: clearIcon ? jsxRuntime.jsx(Icon.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(Select.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 (jsxRuntime.jsxs(React.Fragment, { children: [before, jsxRuntime.jsx(Select.components.Control, tslib_es6.__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(Select.components.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React.createElement(Icon.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 (jsxRuntime.jsx(Select.components.DropdownIndicator, tslib_es6.__assign({}, props, { children: dropdownIcon ? (jsxRuntime.jsx(Icon.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(Select.components.GroupHeading, Object.assign({}, props, {
-    className: clsx('select__menu-group-heading', headingFill, headingFillHover)
-  }), /*#__PURE__*/React.createElement(Text.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 (jsxRuntime.jsx(Select.components.GroupHeading, tslib_es6.__assign({}, props, { className: clsx('select__menu-group-heading', headingFill, headingFillHover), children: jsxRuntime.jsx(Text.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(Select.components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React.createElement(Badge.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 (jsxRuntime.jsxs(Select.components.IndicatorsContainer, tslib_es6.__assign({}, props, { children: [showBadge &&
+                value &&
+                // @ts-expect-error
+                (value === null || value === void 0 ? void 0 : value.length) > 0 ? (jsxRuntime.jsx(Badge.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(Select.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 (jsxRuntime.jsx(Select.components.Input, tslib_es6.__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(Select.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 (jsxRuntime.jsxs(Select.components.Menu, tslib_es6.__assign({}, props, { className: clsx(elevation && "elevation_".concat(elevation)), children: [menuBefore, props.selectProps.fetchingData ? (jsxRuntime.jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsxRuntime.jsx(React.Fragment, { children: props.children })), menuAfter] })));
 };
 
-const SelectMultiValueContainer = props => {
-  const {
-    multipleItemFill,
-    multipleItemFillHover
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(Select.components.MultiValueContainer, props, /*#__PURE__*/React.createElement(Group.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 (jsxRuntime.jsx(Select.components.MultiValueContainer, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(Group.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(Select.components.MultiValueLabel, props, /*#__PURE__*/React.createElement(Text.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 (jsxRuntime.jsx(Select.components.MultiValueLabel, tslib_es6.__assign({}, props, { children: props.data && (jsxRuntime.jsx(Text.Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) })));
 };
 
-const SelectMultiValueRemove = props => {
-  const {
-    multipleItemIcon,
-    multipleItemIconFill
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(Select.components.MultiValueRemove, props, /*#__PURE__*/React.createElement(Icon.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 (jsxRuntime.jsxs(Select.components.MultiValueRemove, tslib_es6.__assign({}, props, { children: [jsxRuntime.jsx(Icon.Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }), jsxRuntime.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(Select.components.NoOptionsMessage, Object.assign({}, props, {
-    className: clsx(optionFill, optionBorder, optionBorderType)
-  }), /*#__PURE__*/React.createElement(Text.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 (jsxRuntime.jsx(Select.components.NoOptionsMessage, tslib_es6.__assign({}, props, { className: clsx(optionFill, optionBorder, optionBorderType), children: jsxRuntime.jsx(Text.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(Select.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.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.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 (jsxRuntime.jsxs(Select.components.Option, tslib_es6.__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, jsxRuntime.jsx(Text.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, children: label }), isSelected && jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: optionSelected }), optionAfter, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill, direction: dividerDirection, size: dividerSize }))] })));
 };
 
-const SelectPlaceholder = props => {
-  const {
-    placeholderTextSize,
-    placeholderTextColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(Select.components.Placeholder, props, /*#__PURE__*/React.createElement(Text.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 (jsxRuntime.jsx(Select.components.Placeholder, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(Text.Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) })));
 };
 
-const SelectSingleValue = props => {
-  const {
-    data
-  } = props;
-  const {
-    inputTextSize,
-    inputTextColor
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(Select.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React.createElement(Text.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 (jsxRuntime.jsxs(Select.components.SingleValue, tslib_es6.__assign({}, props, { children: [data && data.optionBefore, jsxRuntime.jsx(Text.Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] })));
 };
 
-const SelectValueContainer = props => {
-  const {
-    inputBefore,
-    inputAfter
-  } = props.selectProps;
-  return /*#__PURE__*/React.createElement(Select.components.ValueContainer, props, inputBefore, props.children, inputAfter);
+var SelectValueContainer = function (props) {
+    var _a = props.selectProps, inputAfter = _a.inputAfter, inputBefore = _a.inputBefore;
+    return (jsxRuntime.jsxs(Select.components.ValueContainer, tslib_es6.__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 = React.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 = React.useRef(null);
-  const selectRef = ref || defaultRef;
 
-  // React-select wai function as "loadingMessage" property
-  const getLoadingMessage = React.useCallback(params => {
-    // const { inputValue } = params
-    return loadingMessage;
-  }, [loadingMessage]);
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'select_shape_',
-    propsKey: 'shape'
-  });
-  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'select_size_',
-    propsKey: 'size'
-  });
-  const optionFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'optionFill'
-  });
-  const optionFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'optionFillHover'
-  });
-  const optionBorderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'optionBorder'
-  });
-  const optionBorderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'optionBorderType'
-  });
-  const optionTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'optionTextSize'
-  });
-  const optionTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'optionTextColor'
-  });
-  const optionShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'optionShape'
-  });
-  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'select__control_fill_',
-    propsKey: 'inputFill'
-  });
-  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'select__control_shape_',
-    propsKey: 'inputShape'
-  });
-  const inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'inputTextSize'
-  });
-  const inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'inputTextColor'
-  });
-  const multipleItemTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'multipleItemTextSize'
-  });
-  const multipleItemTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'multipleItemTextColor'
-  });
-  const inputBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'inputBorderColor'
-  });
-  const inputBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'inputBorderColorHover'
-  });
-  const noOptionsTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'noOptionsTextSize'
-  });
-  const noOptionsTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'noOptionsTextColor'
-  });
-  const inputCaretColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'inputCaretColor'
-  });
-  const headingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'headingFill'
-  });
-  const headingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'headingFillHover'
-  });
-  const headingTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'headingTextSize'
-  });
-  const headingTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'headingTextWeight'
-  });
-  const headingTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'headingTextColor'
-  });
-  const SelectComponent = React.useMemo(() => isCreatable ? CreatableSelect : Select, [isCreatable]);
-  React.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 = React.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 = React.useRef(null);
+    var selectRef = ref || defaultRef;
+    // React-select wai function as "loadingMessage" property
+    // (params: { inputValue: string }) => {
+    var getLoadingMessage = React.useCallback(function () {
+        // const { inputValue } = params
+        return loadingMessage;
+    }, [loadingMessage]);
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'select_shape_',
+        propsKey: 'shape',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'select_size_',
+        propsKey: 'size',
+    });
+    var optionFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'optionFill',
+    });
+    var optionFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'optionFillHover',
+    });
+    var optionBorderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'optionBorder',
+    });
+    var optionBorderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'optionBorderType',
+    });
+    var optionTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'optionTextSize',
+    });
+    var optionTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'optionTextColor',
+    });
+    var optionShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'optionShape',
+    });
+    var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'select__control_fill_',
+        propsKey: 'inputFill',
+    });
+    var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'select__control_shape_',
+        propsKey: 'inputShape',
+    });
+    var inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'inputTextSize',
+    });
+    var inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'inputTextColor',
+    });
+    var multipleItemTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'multipleItemTextSize',
+    });
+    var multipleItemTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'multipleItemTextColor',
+    });
+    var inputBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'inputBorderColor',
+    });
+    var inputBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'inputBorderColorHover',
+    });
+    var noOptionsTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'noOptionsTextSize',
+    });
+    var noOptionsTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'noOptionsTextColor',
+    });
+    var inputCaretColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'inputCaretColor',
+    });
+    var headingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'headingFill',
+    });
+    var headingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'headingFillHover',
+    });
+    var headingTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'headingTextSize',
+    });
+    var headingTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'headingTextWeight',
+    });
+    var headingTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'headingTextColor',
+    });
+    var SelectComponent = React.useMemo(function () { return (isCreatable ? CreatableSelect : Select); }, [isCreatable]);
+    React.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 (jsxRuntime.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;
+    },
 };
 
 exports.Select = SelectContainer;