@itcase/ui 1.8.176 → 1.8.178

package/dist/{DatePicker_cjs_Jt22mPR8.js → DatePicker_cjs_C4EKZl4o.js}

@@ -10,7 +10,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Button = require('./Button_cjs_CYWNdPTJ.js');
 var Icon = require('./Icon_cjs_Xsu3KUlK.js');
-var Input = require('./Input_cjs_CJOik_SP.js');
+var Input = require('./Input_cjs_KgFCCi2U.js');
 var Label = require('./Label_cjs_RHq5CRw5.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 var _default = require('@itcase/icons/default');

package/dist/{DatePicker_es_CbKQCO3U.js → DatePicker_es_B7Th76gy.js}

@@ -8,7 +8,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { B as Button } from './Button_es_Bns3_lNe.js';
 import { I as Icon } from './Icon_es_B02tKDTb.js';
-import { I as Input } from './Input_es_Dboktsxf.js';
+import { I as Input } from './Input_es_I8GPoibb.js';
 import { L as Label } from './Label_es_CwhSc0UL.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
 import { icons14 } from '@itcase/icons/default';

package/dist/{Input_cjs_CJOik_SP.js → Input_cjs_KgFCCi2U.js}

@@ -129,11 +129,11 @@ const inputAppearanceSize = {
     },
     sizeXL: {
         size: 'xl',
-        textSize: 's',
+        textSize: 'm',
     },
     sizeL: {
         size: 'l',
-        textSize: 's',
+        textSize: 'm',
     },
     sizeM: {
         size: 'm',

package/dist/{Input_es_Dboktsxf.js → Input_es_I8GPoibb.js}

@@ -127,11 +127,11 @@ const inputAppearanceSize = {
     },
     sizeXL: {
         size: 'xl',
-        textSize: 's',
+        textSize: 'm',
     },
     sizeL: {
         size: 'l',
-        textSize: 's',
+        textSize: 'm',
     },
     sizeM: {
         size: 'm',

package/dist/SelectContainer_cjs_BOMkYSVf.js

@@ -0,0 +1,583 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var Select = require('react-select');
+var CreatableSelect = require('react-select/creatable');
+var Group = require('./Group_cjs_CFzdSMKV.js');
+var Text = require('./Text_cjs_DaH5tVvz.js');
+var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var _default = require('@itcase/icons/default');
+var Icon = require('./Icon_cjs_Xsu3KUlK.js');
+var Loader = require('./Loader_cjs_CRiUlTC3.js');
+var Divider = require('./Divider_cjs_DrmV2ezS.js');
+
+// interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
+//   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
+// For use memo need to check "ClearIndicator" props
+// const SelectClearIndicator = React.memo(
+const SelectClearIndicator = (props) => {
+    const { children } = props;
+    const { clearIcon, clearIconFill } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: clearIcon ? (jsxRuntime.jsx(Icon.Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) }));
+};
+
+const SelectLoadingMessage = (props) => {
+    const { loadingMessageText, loadingMessageTextColor, loadingMessageTextSize, } = props.selectProps;
+    return (jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(Text.Text, { size: loadingMessageTextSize, textColor: loadingMessageTextColor, children: loadingMessageText }) }));
+};
+
+const selectAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
+        optionFillDisabled: 'surfaceSecondary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        elevation: 8,
+        badgeAppearance: 'accent',
+        clearIconFill: 'surfaceItemQuaternary',
+        dropdownIconFill: 'surfaceItemQuaternary',
+        groupFill: 'surfaceSecondary',
+        groupTextColor: 'surfaceTextPrimary',
+        groupTextWeight: '600',
+        inputCaretColor: 'accentPrimary',
+        inputTextColor: 'surfaceTextPrimary',
+        loaderAppearance: 'accentPrimary sizeS ghost',
+        loadingMessageTextColor: 'surfaceTextPrimary',
+        menuFill: 'surfacePrimary',
+        multipleItemFill: 'accentPrimary',
+        multipleItemFillHover: 'accentSecondary',
+        multipleItemIconFill: 'accentItemPrimary',
+        multipleItemTextColor: 'accentTextPrimary',
+        multipleTextColor: 'accentTextPrimary',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        optionBorder: 'none',
+        optionFill: 'surfacePrimary',
+        optionFillActive: 'accentPrimary',
+        optionFillActiveHover: 'accentSecondary',
+        optionFillHover: 'surfaceSecondary',
+        optionSelectedIconFillIcon: 'successItemPrimary',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextColorActive: 'accentTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+    },
+};
+
+const selectAppearanceDisabled = {
+    disabledPrimary: {
+        elevation: 8,
+        badgeAppearance: 'accent',
+        clearIconFill: 'surfaceItemDisabled',
+        dropdownIconFill: 'surfaceItemDisabled',
+        headingFill: 'surfaceSecondary',
+        headingTextColor: 'surfaceTextPrimary',
+        inputBorderColor: 'surfaceBorderTertiary',
+        inputBorderColorHover: 'surfaceBorderQuaternary',
+        inputCaretColor: 'secondaryItemPrimary',
+        inputFill: 'surfaceDisabled',
+        inputShape: 'rounded',
+        inputTextColor: 'surfaceTextPrimary',
+        multipleItemFill: 'accentPrimary',
+        multipleItemFillHover: 'surfaceHover',
+        multipleItemIconFill: 'accentItemPrimary',
+        multipleItemTextColor: 'accentTextPrimary',
+        multipleTextColor: 'accentTextPrimary',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        optionBorder: 'none',
+        optionFill: 'surfacePrimary',
+        optionFillHover: 'surfaceSecondary',
+        optionShape: 'rounded',
+        optionTextColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+    },
+};
+
+const selectAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillHover: 'errorTertiary',
+        optionFillDisabled: 'surfaceSecondary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        elevation: 8,
+        badgeAppearance: 'accent',
+        clearIconFill: 'surfaceItemQuaternary',
+        dropdownIconFill: 'surfaceItemQuaternary',
+        groupFill: 'surfaceSecondary',
+        groupTextColor: 'surfaceTextPrimary',
+        groupTextWeight: '600',
+        inputCaretColor: 'accentPrimary',
+        inputTextColor: 'surfaceTextPrimary',
+        loaderAppearance: 'accentPrimary sizeS ghost',
+        loadingMessageTextColor: 'surfaceTextPrimary',
+        menuFill: 'surfacePrimary',
+        multipleItemFill: 'accentPrimary',
+        multipleItemFillHover: 'accentSecondary',
+        multipleItemIconFill: 'accentItemPrimary',
+        multipleItemTextColor: 'accentTextPrimary',
+        multipleTextColor: 'accentTextPrimary',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        optionBorder: 'none',
+        optionFill: 'surfacePrimary',
+        optionFillActive: 'accentPrimary',
+        optionFillActiveHover: 'accentSecondary',
+        optionFillHover: 'surfaceSecondary',
+        optionSelectedIconFillIcon: 'successItemPrimary',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextColorActive: 'accentTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+    },
+};
+
+const selectAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillHover: 'warningTertiary',
+        optionFillDisabled: 'surfaceSecondary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        elevation: 8,
+        badgeAppearance: 'accent',
+        clearIconFill: 'surfaceItemQuaternary',
+        dropdownIconFill: 'surfaceItemQuaternary',
+        groupFill: 'surfaceSecondary',
+        groupTextColor: 'surfaceTextPrimary',
+        groupTextWeight: '600',
+        inputCaretColor: 'accentPrimary',
+        inputTextColor: 'surfaceTextPrimary',
+        loaderAppearance: 'accentPrimary sizeS ghost',
+        loadingMessageTextColor: 'surfaceTextPrimary',
+        menuFill: 'surfacePrimary',
+        multipleItemFill: 'accentPrimary',
+        multipleItemFillHover: 'accentSecondary',
+        multipleItemIconFill: 'accentItemPrimary',
+        multipleItemTextColor: 'accentTextPrimary',
+        multipleTextColor: 'accentTextPrimary',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        optionBorder: 'none',
+        optionFill: 'surfacePrimary',
+        optionFillActive: 'accentPrimary',
+        optionFillActiveHover: 'accentSecondary',
+        optionFillHover: 'surfaceSecondary',
+        optionSelectedIconFillIcon: 'successItemPrimary',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextColorActive: 'accentTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+    },
+};
+
+const selectAppearanceShape = {
+    rounded: {
+        multipleItemShapeRadius: '1m',
+        shape: 'rounded',
+    },
+    roundedXL: {
+        multipleItemShapeRadius: '1m',
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        multipleItemShapeRadius: '1m',
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        multipleItemShapeRadius: '1m',
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        multipleItemShapeRadius: '1m',
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+
+const selectAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        textLoadingMessageAppearance: 'sizeM',
+        badgeSize: 'm',
+        badgeTextSize: 'm',
+        clearIcon: _default.icons24.Action.Clear,
+        dividerSize: 'xxs',
+        dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
+        groupTextSize: 'm',
+        headingTextWeight: '600',
+        inputTextSize: 'm',
+        menuItemSize: 'l',
+        multipleItemIcon: _default.icons16.Action.Close,
+        multipleItemTextSize: 's',
+        noOptionsTextSize: 's',
+        optionSelectedIcon: _default.icons16.Form.Check,
+        optionTextSize: 'm',
+        placeholderTextSize: 'm',
+    },
+    sizeL: {
+        size: 'l',
+        textLoadingMessageAppearance: 'sizeM',
+        badgeSize: 'm',
+        badgeTextSize: 'm',
+        clearIcon: _default.icons24.Action.Clear,
+        dividerSize: 'xxs',
+        dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
+        groupTextSize: 'm',
+        headingTextWeight: '600',
+        inputTextSize: 'm',
+        menuItemSize: 'l',
+        multipleItemIcon: _default.icons16.Action.Close,
+        multipleItemTextSize: 's',
+        noOptionsTextSize: 'm',
+        optionSelectedIcon: _default.icons16.Form.Check,
+        optionTextSize: 'm',
+        placeholderTextSize: 'm',
+    },
+    sizeM: {
+        size: 'm',
+        textLoadingMessageAppearance: 'sizeM',
+        badgeSize: 'm',
+        badgeTextSize: 'm',
+        clearIcon: _default.icons24.Action.Clear,
+        dividerSize: 'xxs',
+        dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
+        groupTextSize: 'm',
+        inputTextSize: 'm',
+        loadingMessageTextSize: 'm',
+        menuItemSize: 'l',
+        multipleItemIcon: _default.icons14.Action.Close,
+        multipleItemTextSize: 'xs ',
+        noOptionsTextSize: 'm',
+        optionSelectedIcon: _default.icons14.Form.Check,
+        optionTextSize: 'm',
+        placeholderTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        textLoadingMessageAppearance: 'sizeS',
+        badgeSize: 'm',
+        badgeTextSize: 'm',
+        clearIcon: _default.icons24.Action.Clear,
+        dividerSize: 'xxs',
+        dropdownIcon: _default.icons24.Arrow.ChevronDownSmall,
+        groupTextSize: 'm',
+        headingTextWeight: '600',
+        inputTextSize: 's',
+        menuItemSize: 'l',
+        multipleItemIcon: _default.icons14.Action.Close,
+        multipleItemTextSize: 'xs ',
+        noOptionsTextSize: 's',
+        optionSelectedIcon: _default.icons14.Form.Check,
+        optionTextSize: 's',
+        placeholderTextSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        textLoadingMessageAppearance: 'sizeXS',
+        badgeSize: 'm',
+        badgeTextSize: 'm',
+        clearIcon: _default.icons16.Action.Clear,
+        dividerSize: 'xxs',
+        dropdownIcon: _default.icons16.Arrow.ChevronDownSmall,
+        groupTextSize: 'm',
+        headingTextWeight: '600',
+        inputTextSize: 'xs ',
+        menuItemSize: 'l',
+        multipleItemIcon: _default.icons12.Action.Close,
+        multipleItemTextSize: 'xxs',
+        noOptionsTextSize: 'xs',
+        // optionSelectedIcon: icons12.Form.Check,
+        optionTextSize: 'xs',
+        placeholderTextSize: 'xs',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textLoadingMessageAppearance: 'sizeXS',
+        badgeSize: 'm',
+        badgeTextSize: 'm',
+        clearIcon: _default.icons16.Action.Clear,
+        dividerSize: 'xxs',
+        dropdownIcon: _default.icons16.Arrow.ChevronDownSmall,
+        groupTextSize: 'm',
+        headingTextWeight: '600',
+        inputTextSize: 'xs',
+        menuItemSize: 'l',
+        multipleItemIcon: _default.icons12.Action.Close,
+        // optionSelectedIcon: icons12.Form.Check,
+        multipleItemTextSize: 'xxs',
+        noOptionsTextSize: 'xs',
+        optionTextSize: 'xs',
+        placeholderTextSize: 'xs',
+    },
+};
+
+const selectAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+        borderColorHover: 'none',
+    },
+    outlined: {
+        fill: 'none',
+        fillHover: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+        borderColorHover: 'none',
+    },
+};
+
+const selectAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        fillHover: 'successTertiary',
+        optionFillDisabled: 'surfaceSecondary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        elevation: 8,
+        badgeAppearance: 'accent',
+        clearIconFill: 'surfaceItemQuaternary',
+        dropdownIconFill: 'surfaceItemQuaternary',
+        groupFill: 'surfaceSecondary',
+        groupTextColor: 'surfaceTextPrimary',
+        groupTextWeight: '600',
+        inputCaretColor: 'accentPrimary',
+        inputTextColor: 'surfaceTextPrimary',
+        loaderAppearance: 'accentPrimary sizeS ghost',
+        loadingMessageTextColor: 'surfaceTextPrimary',
+        menuFill: 'surfacePrimary',
+        multipleItemFill: 'accentPrimary',
+        multipleItemFillHover: 'accentSecondary',
+        multipleItemIconFill: 'accentItemPrimary',
+        multipleItemTextColor: 'accentTextPrimary',
+        multipleTextColor: 'accentTextPrimary',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        optionBorder: 'none',
+        optionFill: 'surfacePrimary',
+        optionFillActive: 'accentPrimary',
+        optionFillActiveHover: 'accentSecondary',
+        optionFillHover: 'surfaceSecondary',
+        optionSelectedIconFillIcon: 'successItemPrimary',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextColorActive: 'accentTextPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        requiredInputBorderColor: 'warningBorderPrimary',
+    },
+};
+
+const selectAppearance = {
+    ...selectAppearanceRequire,
+    ...selectAppearanceDefault,
+    ...selectAppearanceDisabled,
+    ...selectAppearanceSuccess,
+    ...selectAppearanceSize,
+    ...selectAppearanceError,
+    ...selectAppearanceShape,
+    ...selectAppearanceStyle,
+};
+
+const SelectControl = (props) => {
+    const { before, after } = props.selectProps;
+    return (jsxRuntime.jsxs(React.Fragment, { children: [before, jsxRuntime.jsx(Select.components.Control, { ...props, className: clsx('select__control') }), after] }));
+};
+
+// For use memo need to check "DropdownIndicator" props
+// const SelectDropdownIndicator = React.memo(
+const SelectDropdownIndicator = (props) => {
+    const { children } = props;
+    const { dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: dropdownIcon ? (jsxRuntime.jsx(Icon.Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) }));
+};
+
+const SelectGroupHeading = (props) => {
+    const { groupFill, groupTextColor, groupTextSize, groupTextWeight } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.GroupHeading, { ...props, className: clsx('select__menu-group-heading', groupFill && `fill_${groupFill}`), children: jsxRuntime.jsx(Text.Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) }));
+};
+
+const SelectIndicatorsContainer = (props) => {
+    const { badgeAppearance, badgeSize, badgeTextSize, showBadge, value } = props.selectProps;
+    return (jsxRuntime.jsxs(Select.components.IndicatorsContainer, { ...props, children: [showBadge &&
+                value &&
+                // @ts-expect-error
+                value?.length > 0 ? (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
+                // @ts-expect-error
+                value: value.length.toString() })) : null, props.children] }));
+};
+
+const SelectInput = (props) => {
+    const { inputCaretColor, inputTextColor, inputTextSize } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.Input, { ...props, className: clsx(inputTextSize && `text_size_${inputTextSize}`, inputTextColor && `text-color_${inputTextColor}`, inputCaretColor && `caret-color_${inputCaretColor}`) }));
+};
+
+const SelectLoadingIndicator = (props) => {
+    const { loaderAppearance, isLoading } = props.selectProps;
+    return isLoading && jsxRuntime.jsx(Loader.Loader, { appearance: loaderAppearance });
+};
+
+const SelectMenu = (props) => {
+    const { elevation, menuAfter, menuBefore, menuFill, menuShape, menuShapeStrength, } = props.selectProps;
+    return (jsxRuntime.jsxs(Select.components.Menu, { ...props, className: clsx(menuFill && `fill_${menuFill}`, menuShape && `shape_${menuShape}`, menuShapeStrength && `shape-strength_${menuShapeStrength}`, elevation && `elevation_${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, multipleItemShapeRadius } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.MultiValueContainer, { ...props, children: jsxRuntime.jsx(Group.Group, { className: clsx('select__multi-value-item'), direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, borderRadius: multipleItemShapeRadius, gap: "0.5m", children: props.children }) }));
+};
+
+const SelectMultiValueLabel = (props) => {
+    const { multipleItemTextColor, multipleItemTextSize } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.MultiValueLabel, { ...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 (jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: jsxRuntime.jsx(Icon.Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
+};
+
+const SelectNoOptions = (props) => {
+    const { inputValue, noOptionsSearchText, noOptionsText, noOptionsTextColor, noOptionsTextSize, optionFill, } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, className: clsx(optionFill && `fill_${optionFill}`), children: jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(Text.Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText
+                    ? noOptionsSearchText
+                    : noOptionsText }) }) }));
+};
+
+const SelectOption = (props) => {
+    const { label, isSelected } = props;
+    const { optionFillActiveDisabled, optionFillDisabled, optionTextColorDisabled, dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveHover, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextSize, showDivider, } = props.selectProps;
+    return (jsxRuntime.jsxs(Select.components.Option, { ...props, className: clsx('select__menu-list-item', isSelected || props.isSelected
+            ? !props.isDisabled
+                ? optionFillActive && `fill_active_${optionFillActive}`
+                : optionFillActiveDisabled &&
+                    `fill_active_disabled_${optionFillActiveDisabled}`
+            : !props.isDisabled
+                ? optionFill && `fill_${optionFill}`
+                : optionFillDisabled && `fill_${optionFillDisabled}`, (isSelected || props.isSelected) &&
+            !props.isDisabled &&
+            optionFillActiveHover &&
+            `fill_active_hover_${optionFillActiveHover}`, !isSelected &&
+            !props.isSelected &&
+            !props.isDisabled &&
+            optionFillHover &&
+            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsxRuntime.jsx(Text.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isDisabled: props.isDisabled, isActive: props.isSelected || isSelected, children: label }), (isSelected || props.isSelected) && (jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: jsxRuntime.jsx(Icon.Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+};
+
+const SelectPlaceholder = (props) => {
+    const { placeholderTextColor, placeholderTextSize } = props.selectProps;
+    return (jsxRuntime.jsx(Select.components.Placeholder, { ...props, children: jsxRuntime.jsx(Text.Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) }));
+};
+
+const SelectSingleValue = (props) => {
+    const { data } = props;
+    const { inputTextColor, inputTextSize } = props.selectProps;
+    return (jsxRuntime.jsxs(Select.components.SingleValue, { ...props, children: [data && data.optionBefore, jsxRuntime.jsx(Text.Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] }));
+};
+
+const SelectValueContainer = (props) => {
+    const { inputAfter, inputBefore } = props.selectProps;
+    return (jsxRuntime.jsxs(Select.components.ValueContainer, { ...props, children: [inputBefore, props.children, inputAfter] }));
+};
+
+const selectConfig = {
+    appearance: selectAppearance,
+    setAppearance: (appearanceConfig) => {
+        selectConfig.appearance = appearanceConfig;
+    },
+};
+const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
+    const { appearance = '', className, width, minWidth, initialValue, badgeAppearance, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loaderAppearance, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
+    const defaultRef = React.useRef(null);
+    const selectRef = ref || defaultRef;
+    const SelectComponent = isCreatable
+        ? CreatableSelect
+        : Select;
+    React.useEffect(() => {
+        // @ts-expect-error
+        const onClickOutside = (event) => {
+            const isTargetSelectContainer = 
+            // maybe here ".contains()"?
+            event.target.hasClass &&
+                event.target.hasClass('select_state_hide-value-container');
+            if ('current' in selectRef &&
+                selectRef.current &&
+                selectRef.current.controlRef) {
+                const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
+                if (!isTargetSelectContainer && !isTargetInsideController) {
+                    // @ts-expect-error
+                    selectRef.current?.onInputBlur();
+                }
+            }
+        };
+        if (hideValueContainer) {
+            document.addEventListener('click', onClickOutside);
+        }
+        return () => {
+            if (hideValueContainer) {
+                document.removeEventListener('click', onClickOutside);
+            }
+        };
+    }, [hideValueContainer, selectRef]);
+    const clearStyle = React.useMemo(() => new Proxy({
+        container: {
+            width: width,
+            minWidth: minWidth,
+        },
+    }, {
+        get: (target, prop) => {
+            if (prop in target) {
+                return () => target[prop];
+            }
+            return () => { };
+        },
+    }), [minWidth, width]);
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, selectConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
+            IndicatorSeparator: () => null,
+            ClearIndicator: SelectClearIndicator,
+            Control: SelectControl,
+            DropdownIndicator: SelectDropdownIndicator,
+            GroupHeading: SelectGroupHeading,
+            IndicatorsContainer: SelectIndicatorsContainer,
+            Input: SelectInput,
+            LoadingIndicator: SelectLoadingIndicator,
+            LoadingMessage: SelectLoadingMessage,
+            Menu: SelectMenu,
+            MultiValueContainer: SelectMultiValueContainer,
+            MultiValueLabel: SelectMultiValueLabel,
+            MultiValueRemove: SelectMultiValueRemove,
+            NoOptionsMessage: SelectNoOptions,
+            Option: SelectOption,
+            Placeholder: SelectPlaceholder,
+            SingleValue: SelectSingleValue,
+            ValueContainer: SelectValueContainer,
+        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
+});
+
+exports.SelectClearIndicator = SelectClearIndicator;
+exports.SelectContainer = SelectContainer;
+exports.SelectControl = SelectControl;
+exports.SelectDropdownIndicator = SelectDropdownIndicator;
+exports.SelectGroupHeading = SelectGroupHeading;
+exports.SelectIndicatorsContainer = SelectIndicatorsContainer;
+exports.SelectInput = SelectInput;
+exports.SelectMenu = SelectMenu;
+exports.SelectMultiValueContainer = SelectMultiValueContainer;
+exports.SelectMultiValueLabel = SelectMultiValueLabel;
+exports.SelectMultiValueRemove = SelectMultiValueRemove;
+exports.SelectOption = SelectOption;
+exports.SelectPlaceholder = SelectPlaceholder;
+exports.SelectSingleValue = SelectSingleValue;
+exports.SelectValueContainer = SelectValueContainer;
+exports.selectConfig = selectConfig;