@itcase/ui 1.8.177 → 1.8.179

package/dist/components/Select.js

@@ -1,584 +1,32 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import Select, { components } from 'react-select';
-import { I as Icon, B as Badge } from '../Icon_es_B02tKDTb.js';
-import React, { useRef, useEffect, useMemo } from 'react';
-import clsx from 'clsx';
-import CreatableSelect from 'react-select/creatable';
-import { G as Group } from '../Group_es_BwTj-yH-.js';
-import { T as Text } from '../Text_es_RDU9GLCV.js';
-import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
-import { L as Loader } from '../Loader_es_Dq2-7sn2.js';
-import { D as Divider } from '../Divider_es_BiYozVBS.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '@itcase/common';
-import '../context/UrlAssetPrefix.js';
-import '../hooks/useStyles/useStyles.js';
+export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_gcm20n4I.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'react-select';
+import 'react-select/creatable';
+import '../Group_es_BwTj-yH-.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
-import 'lodash/maxBy';
+import 'lodash/castArray';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
+import '../hooks/useStyles/useStyles.js';
+import 'lodash/maxBy';
+import '../Text_es_RDU9GLCV.js';
+import '@itcase/icons/default';
+import '../Icon_es_B02tKDTb.js';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
-import 'lodash/castArray';
-
-// 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 (jsx(components.ClearIndicator, { ...props, children: clearIcon ? (jsx(Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) }));
-};
-
-const SelectLoadingMessage = (props) => {
-    const { loadingMessageText, loadingMessageTextColor, loadingMessageTextSize, } = props.selectProps;
-    return (jsx(Group, { textAlign: "center", children: jsx(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: icons24.Action.Clear,
-        dividerSize: 'xxs',
-        dropdownIcon: icons24.Arrow.ChevronDownSmall,
-        groupTextSize: 'm',
-        headingTextWeight: '600',
-        inputTextSize: 'm',
-        menuItemSize: 'l',
-        multipleItemIcon: icons16.Action.Close,
-        multipleItemTextSize: 's',
-        noOptionsTextSize: 's',
-        optionSelectedIcon: icons16.Form.Check,
-        optionTextSize: 'm',
-        placeholderTextSize: 'm',
-    },
-    sizeL: {
-        size: 'l',
-        textLoadingMessageAppearance: 'sizeM',
-        badgeSize: 'm',
-        badgeTextSize: 'm',
-        clearIcon: icons24.Action.Clear,
-        dividerSize: 'xxs',
-        dropdownIcon: icons24.Arrow.ChevronDownSmall,
-        groupTextSize: 'm',
-        headingTextWeight: '600',
-        inputTextSize: 'm',
-        menuItemSize: 'l',
-        multipleItemIcon: icons16.Action.Close,
-        multipleItemTextSize: 's',
-        noOptionsTextSize: 'm',
-        optionSelectedIcon: icons16.Form.Check,
-        optionTextSize: 'm',
-        placeholderTextSize: 'm',
-    },
-    sizeM: {
-        size: 'm',
-        textLoadingMessageAppearance: 'sizeM',
-        badgeSize: 'm',
-        badgeTextSize: 'm',
-        clearIcon: icons24.Action.Clear,
-        dividerSize: 'xxs',
-        dropdownIcon: icons24.Arrow.ChevronDownSmall,
-        groupTextSize: 'm',
-        inputTextSize: 'm',
-        loadingMessageTextSize: 'm',
-        menuItemSize: 'l',
-        multipleItemIcon: icons14.Action.Close,
-        multipleItemTextSize: 'xs ',
-        noOptionsTextSize: 'm',
-        optionSelectedIcon: icons14.Form.Check,
-        optionTextSize: 'm',
-        placeholderTextSize: 'm',
-    },
-    sizeS: {
-        size: 's',
-        textLoadingMessageAppearance: 'sizeS',
-        badgeSize: 'm',
-        badgeTextSize: 'm',
-        clearIcon: icons24.Action.Clear,
-        dividerSize: 'xxs',
-        dropdownIcon: icons24.Arrow.ChevronDownSmall,
-        groupTextSize: 'm',
-        headingTextWeight: '600',
-        inputTextSize: 's',
-        menuItemSize: 'l',
-        multipleItemIcon: icons14.Action.Close,
-        multipleItemTextSize: 'xs ',
-        noOptionsTextSize: 's',
-        optionSelectedIcon: icons14.Form.Check,
-        optionTextSize: 's',
-        placeholderTextSize: 's',
-    },
-    sizeXS: {
-        size: 'xs',
-        textLoadingMessageAppearance: 'sizeXS',
-        badgeSize: 'm',
-        badgeTextSize: 'm',
-        clearIcon: icons16.Action.Clear,
-        dividerSize: 'xxs',
-        dropdownIcon: icons16.Arrow.ChevronDownSmall,
-        groupTextSize: 'm',
-        headingTextWeight: '600',
-        inputTextSize: 'xs ',
-        menuItemSize: 'l',
-        multipleItemIcon: 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: icons16.Action.Clear,
-        dividerSize: 'xxs',
-        dropdownIcon: icons16.Arrow.ChevronDownSmall,
-        groupTextSize: 'm',
-        headingTextWeight: '600',
-        inputTextSize: 'xs',
-        menuItemSize: 'l',
-        multipleItemIcon: 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 (jsxs(React.Fragment, { children: [before, jsx(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 (jsx(components.DropdownIndicator, { ...props, children: dropdownIcon ? (jsx(Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) }));
-};
-
-const SelectGroupHeading = (props) => {
-    const { groupFill, groupTextColor, groupTextSize, groupTextWeight } = props.selectProps;
-    return (jsx(components.GroupHeading, { ...props, className: clsx('select__menu-group-heading', groupFill && `fill_${groupFill}`), children: jsx(Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) }));
-};
-
-const SelectIndicatorsContainer = (props) => {
-    const { badgeAppearance, badgeSize, badgeTextSize, showBadge, value } = props.selectProps;
-    return (jsxs(components.IndicatorsContainer, { ...props, children: [showBadge &&
-                value &&
-                // @ts-expect-error
-                value?.length > 0 ? (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
-                // @ts-expect-error
-                value: value.length.toString() })) : null, props.children] }));
-};
-
-const SelectInput = (props) => {
-    const { inputCaretColor, inputTextColor, inputTextSize } = props.selectProps;
-    return (jsx(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 && jsx(Loader, { appearance: loaderAppearance });
-};
-
-const SelectMenu = (props) => {
-    const { elevation, menuAfter, menuBefore, menuFill, menuShape, menuShapeStrength, } = props.selectProps;
-    return (jsxs(components.Menu, { ...props, className: clsx(menuFill && `fill_${menuFill}`, menuShape && `shape_${menuShape}`, menuShapeStrength && `shape-strength_${menuShapeStrength}`, elevation && `elevation_${elevation}`), children: [menuBefore, props.selectProps.fetchingData ? (jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsx(React.Fragment, { children: props.children })), menuAfter] }));
-};
-
-const SelectMultiValueContainer = (props) => {
-    const { multipleItemFill, multipleItemFillHover, multipleItemShapeRadius } = props.selectProps;
-    return (jsx(components.MultiValueContainer, { ...props, children: jsx(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 (jsx(components.MultiValueLabel, { ...props, children: props.data && (jsx(Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) }));
-};
-
-const SelectMultiValueRemove = (props) => {
-    const { multipleItemIcon, multipleItemIconFill } = props.selectProps;
-    return (jsx(components.MultiValueRemove, { ...props, children: jsx(Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
-};
-
-const SelectNoOptions = (props) => {
-    const { inputValue, noOptionsSearchText, noOptionsText, noOptionsTextColor, noOptionsTextSize, optionFill, } = props.selectProps;
-    return (jsx(components.NoOptionsMessage, { ...props, className: clsx(optionFill && `fill_${optionFill}`), children: jsx(Group, { textAlign: "center", children: jsx(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 (jsxs(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, jsx(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) && (jsx("div", { className: "select__menu-list-item_selected", children: jsx(Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
-};
-
-const SelectPlaceholder = (props) => {
-    const { placeholderTextColor, placeholderTextSize } = props.selectProps;
-    return (jsx(components.Placeholder, { ...props, children: jsx(Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) }));
-};
-
-const SelectSingleValue = (props) => {
-    const { data } = props;
-    const { inputTextColor, inputTextSize } = props.selectProps;
-    return (jsxs(components.SingleValue, { ...props, children: [data && data.optionBefore, jsx(Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] }));
-};
-
-const SelectValueContainer = (props) => {
-    const { inputAfter, inputBefore } = props.selectProps;
-    return (jsxs(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 = useRef(null);
-    const selectRef = ref || defaultRef;
-    const SelectComponent = isCreatable
-        ? CreatableSelect
-        : Select;
-    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 = useMemo(() => new Proxy({
-        container: {
-            width: width,
-            minWidth: minWidth,
-        },
-    }, {
-        get: (target, prop) => {
-            if (prop in target) {
-                return () => target[prop];
-            }
-            return () => { };
-        },
-    }), [minWidth, width]);
-    const appearanceConfig = useAppearanceConfig(appearance, selectConfig, isDisabled);
-    const propsGenerator = 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 (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 }));
-});
-
-export { SelectContainer as Select, SelectClearIndicator, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig };
+import '../Loader_es_Dq2-7sn2.js';
+import '../Divider_es_BiYozVBS.js';