@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Search/appearance/searchSize.js

@@ -0,0 +1,46 @@
+import { icons16, icons24 } from '@itcase/icons/default';
+const searchAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
+        inputTextSize: 'l',
+        placeholderTextSize: 'l',
+    },
+    sizeXL: {
+        size: 'xl',
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
+        inputTextSize: 'm',
+        placeholderTextSize: 'm',
+    },
+    sizeL: {
+        size: 'l',
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
+        inputTextSize: 's',
+        placeholderTextSize: 's',
+    },
+    sizeM: {
+        size: 'm',
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
+        inputTextSize: 'm',
+        placeholderTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
+        inputTextSize: 's',
+        placeholderTextSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        iconBefore: icons16.Security.Search,
+        iconClear: icons16.Action.Clear,
+        inputTextSize: 's',
+        placeholderTextSize: 's',
+    },
+};
+export { searchAppearanceSize };

package/dist/components/Search/appearance/searchStyle.js

@@ -0,0 +1,17 @@
+const searchAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+        borderColorHover: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { searchAppearanceStyle };

package/dist/components/Search/appearance/searchSuccess.js

@@ -0,0 +1,12 @@
+const searchAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        borderColor: 'accentBorderQuaternary',
+        borderColorHover: 'accentBorderQuaternary',
+        iconAfterFill: 'successItemSecondary',
+        iconBeforeFill: 'successItemSecondary',
+        iconClearFill: 'successItemSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { searchAppearanceSuccess };

package/dist/components/Search/index.js

@@ -0,0 +1,4 @@
+import { searchAppearance } from './Search.appearance';
+import { SearchInput, searchInputConfig } from './SearchInput';
+import { SearchResult } from './SearchResult';
+export { SearchInput, searchInputConfig, searchAppearance, SearchResult };

package/dist/components/Segmented/Segmented.appearance.js

@@ -0,0 +1,21 @@
+import { segmentedAppearanceDefault } from './appearance/segmentedDefault';
+import { segmentedAppearanceDisabled } from './appearance/segmentedDisabled';
+import { segmentedAppearanceError } from './appearance/segmentedError';
+import { segmentedAppearanceRequire } from './appearance/segmentedRequire';
+import { segmentedAppearanceShape } from './appearance/segmentedShape';
+import { segmentedAppearanceSize } from './appearance/segmentedSize';
+import { segmentedAppearanceStyle } from './appearance/segmentedStyle';
+import { segmentedAppearanceSuccess } from './appearance/segmentedSuccess';
+import { segmentedAppearanceWarning } from './appearance/segmentedWarning';
+const segmentedAppearance = {
+    ...segmentedAppearanceDisabled,
+    ...segmentedAppearanceSize,
+    ...segmentedAppearanceShape,
+    ...segmentedAppearanceStyle,
+    ...segmentedAppearanceError,
+    ...segmentedAppearanceSuccess,
+    ...segmentedAppearanceDefault,
+    ...segmentedAppearanceWarning,
+    ...segmentedAppearanceRequire,
+};
+export { segmentedAppearance };

package/dist/components/Segmented/Segmented.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Segmented/Segmented.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useCallback, useEffect, useMemo, useRef, } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { segmentedAppearance } from './Segmented.appearance';
+const segmentedConfig = {
+    appearance: segmentedAppearance,
+    setAppearance: (appearanceConfig) => {
+        segmentedConfig.appearance = appearanceConfig;
+    },
+};
+const Segmented = (props) => {
+    const { appearance, className, dataTestId, dataTour, name, activeSegment, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
+    const controlRef = useRef(null);
+    const segmentsRefs = useMemo(() => new Map(segments.map((item) => [item.value, createRef()])), [segments]);
+    const onChangeValue = useCallback((item) => {
+        onChange && onChange(item.value, name);
+        setActiveSegment && setActiveSegment(item);
+    }, [name, onChange, setActiveSegment]);
+    useEffect(() => {
+        let offsetWidth = 0;
+        let offsetLeft = 0;
+        const activeSegmentRef = segmentsRefs.get(activeSegment.value);
+        if (activeSegmentRef?.current) {
+            offsetWidth = activeSegmentRef.current.offsetWidth;
+            offsetLeft = activeSegmentRef.current.offsetLeft;
+        }
+        controlRef.current?.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
+        controlRef.current?.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
+    }, [activeSegment, segmentsRefs]);
+    const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (_jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, "data-testid": dataTestId, "data-tour": dataTour, children: _jsx("div", { className: "segmented__wrapper", children: _jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
+                        const isActive = activeSegment.value === item.value;
+                        return (_jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
+                                isDisabled &&
+                                'segmented__item_active_state_disabled', !isActive
+                                ? fillHoverClass && `fill_hover_${fillHoverClass}`
+                                : fillActiveHoverClass &&
+                                    `fill_active_hover_${fillActiveHoverClass}`, isActive &&
+                                fillActiveClass &&
+                                `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: _jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            ? item.iconBeforeActive || item.iconBefore
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            ? item.iconAfterActive || item.iconAfter
+                                            : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
+                    }), _jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
+};
+export { Segmented, segmentedConfig };

package/dist/components/Segmented/appearance/segmentedDefault.js

@@ -0,0 +1,29 @@
+const segmentedAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+        indicatorFill: 'accentPrimary',
+    },
+    defaultSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+        indicatorFill: 'accentPrimary',
+    },
+};
+export { segmentedAppearanceDefault };

package/dist/components/Segmented/appearance/segmentedDisabled.js

@@ -0,0 +1,12 @@
+const segmentedAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        fillActive: 'surfaceTertiary',
+        labelTextActiveColor: 'surfaceTextActiveQuaternary',
+        labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderPrimary',
+        iconFill: 'surfaceItemPrimary',
+        iconFillActive: 'surfaceItemPrimary',
+    },
+};
+export { segmentedAppearanceDisabled };

package/dist/components/Segmented/appearance/segmentedError.js

@@ -0,0 +1,14 @@
+const segmentedAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillActive: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        labelTextActiveColor: 'errorTextActivePrimary',
+        labelTextColor: 'errorTextSecondary',
+        labelTextColorHover: 'errorTextPrimary',
+        borderColor: 'errorBorderQuaternary',
+        iconFill: 'errorItemSecondary',
+        iconFillActive: 'errorItemTertiary',
+    },
+};
+export { segmentedAppearanceError };

package/dist/components/Segmented/appearance/segmentedRequire.js

@@ -0,0 +1,15 @@
+const segmentedAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'warningSecondary',
+        labelTextActiveColor: 'warningTextPrimary',
+        labelTextColor: 'warningTextPrimary',
+        labelTextColorHover: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconFill: 'warningItemSecondary',
+        iconFillActive: 'warningItemTertiary',
+    },
+};
+export { segmentedAppearanceRequire };

package/dist/components/Segmented/appearance/segmentedShape.js

@@ -0,0 +1,25 @@
+const segmentedAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { segmentedAppearanceShape };

package/dist/components/Segmented/appearance/segmentedSize.js

@@ -0,0 +1,28 @@
+const segmentedAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        iconSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconSize: '20',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconSize: '16',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xxs',
+        iconSize: '14',
+    },
+};
+export { segmentedAppearanceSize };

package/dist/components/Segmented/appearance/segmentedStyle.js

@@ -0,0 +1,16 @@
+const segmentedAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+        fillActive: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        fillActive: 'none',
+        borderColor: 'none',
+    },
+};
+export { segmentedAppearanceStyle };

package/dist/components/Segmented/appearance/segmentedSuccess.js

@@ -0,0 +1,13 @@
+const segmentedAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        fillActive: 'successSecondary',
+        fillHover: 'successSecondary',
+        labelTextActiveColor: 'successTextPrimary',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextPrimary',
+        borderColor: 'successBorderSecondary',
+        iconFill: 'successItemSecondary',
+    },
+};
+export { segmentedAppearanceSuccess };

package/dist/components/Segmented/appearance/segmentedWarning.js

@@ -0,0 +1,14 @@
+const segmentedAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningTertiary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'warningSecondary',
+        labelTextActiveColor: 'warningTextPrimary',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconFill: 'warningItemSecondary',
+    },
+};
+export { segmentedAppearanceWarning };

package/dist/components/Segmented/index.js

@@ -0,0 +1,2 @@
+export { Segmented, segmentedConfig } from './Segmented';
+export { segmentedAppearance } from './Segmented.appearance';

package/dist/components/Select/Select.appearance.js

@@ -0,0 +1,19 @@
+import { selectAppearanceDefault } from './appearance/selectDefault';
+import { selectAppearanceDisabled } from './appearance/selectDisabled';
+import { selectAppearanceError } from './appearance/selectError';
+import { selectAppearanceRequire } from './appearance/selectRequire';
+import { selectAppearanceShape } from './appearance/selectShape';
+import { selectAppearanceSize } from './appearance/selectSize';
+import { selectAppearanceStyle } from './appearance/selectStyle';
+import { selectAppearanceSuccess } from './appearance/selectSuccess';
+const selectAppearance = {
+    ...selectAppearanceRequire,
+    ...selectAppearanceDefault,
+    ...selectAppearanceDisabled,
+    ...selectAppearanceSuccess,
+    ...selectAppearanceSize,
+    ...selectAppearanceError,
+    ...selectAppearanceShape,
+    ...selectAppearanceStyle,
+};
+export { selectAppearance };

package/dist/components/Select/Select.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Select/SelectClearIndicator.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from 'react-select';
+import { Icon } from 'src/components/Icon';
+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) }));
+};
+export { SelectClearIndicator };

package/dist/components/Select/SelectContainer.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import Select from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { SelectLoadingMessage } from 'src/components/Select/SelectLoadingMessage';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { selectAppearance } from './Select.appearance';
+import { SelectClearIndicator } from './SelectClearIndicator';
+import { SelectControl } from './SelectControl';
+import { SelectDropdownIndicator } from './SelectDropdownIndicator';
+import { SelectGroupHeading } from './SelectGroupHeading';
+import { SelectIndicatorsContainer } from './SelectIndicatorsContainer';
+import { SelectInput } from './SelectInput';
+import { SelectLoadingIndicator } from './SelectLoadingIndicator';
+import { SelectMenu } from './SelectMenu';
+import { SelectMultiValue } from './SelectMultiValue';
+import { SelectMultiValueContainer } from './SelectMultiValueContainer';
+import { SelectMultiValueLabel } from './SelectMultiValueLabel';
+import { SelectMultiValueRemove } from './SelectMultiValueRemove';
+import { SelectNoOptions } from './SelectNoOptions';
+import { SelectOption } from './SelectOption';
+import { SelectPlaceholder } from './SelectPlaceholder';
+import { SelectSingleValue } from './SelectSingleValue';
+import { SelectValueContainer } from './SelectValueContainer';
+const selectConfig = {
+    appearance: selectAppearance,
+    setAppearance: (appearanceConfig) => {
+        selectConfig.appearance = appearanceConfig;
+    },
+};
+const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
+    const { appearance = '', className, dataTestId, dataTour, width, minWidth, initialValue, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, multiValueMaxCount, 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(() => {
+        const onClickOutside = (event) => {
+            const target = event.target;
+            const isTargetSelectContainer = target && target.classList.contains('select_state_hide-value-container');
+            if ('current' in selectRef &&
+                selectRef.current &&
+                selectRef.current.controlRef) {
+                const isTargetInsideController = selectRef.current.controlRef.contains(target);
+                if (!isTargetSelectContainer && !isTargetInsideController) {
+                    selectRef.current?.onInputBlur(event);
+                }
+            }
+        };
+        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, badgeAppearance, badgeAppearanceSize, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loaderAppearance, 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', isMulti && 'select_multi', 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, badgeAppearanceSize: badgeAppearanceSize, 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,
+            MultiValue: SelectMultiValue,
+            MultiValueContainer: SelectMultiValueContainer,
+            MultiValueLabel: SelectMultiValueLabel,
+            MultiValueRemove: SelectMultiValueRemove,
+            NoOptionsMessage: SelectNoOptions,
+            Option: SelectOption,
+            Placeholder: SelectPlaceholder,
+            SingleValue: SelectSingleValue,
+            ValueContainer: SelectValueContainer,
+        }, "data-testid": dataTestId, "data-tour": dataTour, 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, multiValueMaxCount: multiValueMaxCount, 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 { selectConfig, SelectContainer };

package/dist/components/Select/SelectControl.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { components } from 'react-select';
+const SelectControl = (props) => {
+    const { before, after } = props.selectProps;
+    return (_jsxs(React.Fragment, { children: [before, _jsx(components.Control, { ...props, className: clsx('select__control') }), after] }));
+};
+export { SelectControl };

package/dist/components/Select/SelectDropdownIndicator.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from 'react-select';
+import { Icon } from 'src/components/Icon';
+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) }));
+};
+export { SelectDropdownIndicator };

package/dist/components/Select/SelectGroupHeading.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { components } from 'react-select';
+import { Text } from 'src/components/Text';
+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 }) }));
+};
+export { SelectGroupHeading };

package/dist/components/Select/SelectIndicatorsContainer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { components } from 'react-select';
+import { Badge } from 'src/components/Badge/Badge';
+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] }));
+};
+export { SelectIndicatorsContainer };

package/dist/components/Select/SelectInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { components } from 'react-select';
+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}`) }));
+};
+export { SelectInput };

package/dist/components/Select/SelectLoadingIndicator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from 'src/components/Loader';
+const SelectLoadingIndicator = (props) => {
+    const { loaderAppearance, isLoading } = props.selectProps;
+    return isLoading && _jsx(Loader, { appearance: loaderAppearance });
+};
+export { SelectLoadingIndicator };

package/dist/components/Select/SelectLoadingMessage.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group } from 'src/components/Group';
+import { Text } from 'src/components/Text';
+const SelectLoadingMessage = (props) => {
+    const { loadingMessageText, loadingMessageTextColor, loadingMessageTextSize, } = props.selectProps;
+    return (_jsx(Group, { textAlign: "center", children: _jsx(Text, { size: loadingMessageTextSize, textColor: loadingMessageTextColor, children: loadingMessageText }) }));
+};
+export { SelectLoadingMessage };

package/dist/components/Select/SelectMenu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { components } from 'react-select';
+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] }));
+};
+export { SelectMenu };

package/dist/components/Select/SelectMultiValue.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from 'react-select';
+import { SelectOverflowBadge } from './SelectOverflowBadge';
+const SelectMultiValue = (props) => {
+    const { index, selectProps, getValue } = props;
+    const multiValueMaxCount = selectProps.multiValueMaxCount || 100;
+    const overflowItemsList = getValue()
+        .slice(multiValueMaxCount)
+        .map((x) => x.label);
+    if (index < multiValueMaxCount) {
+        return _jsx(components.MultiValue, { ...props });
+    }
+    if (index === multiValueMaxCount) {
+        return (_jsx(SelectOverflowBadge, { badgeAppearance: selectProps.badgeAppearance, badgeAppearanceSize: selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
+    }
+    return null;
+};
+export { SelectMultiValue };

package/dist/components/Select/SelectMultiValueContainer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { components } from 'react-select';
+import { Group } from 'src/components/Group';
+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 }) }));
+};
+export { SelectMultiValueContainer };

package/dist/components/Select/SelectMultiValueLabel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from 'react-select';
+import { Text } from 'src/components/Text';
+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 })) }));
+};
+export { SelectMultiValueLabel };

package/dist/components/Select/SelectMultiValueRemove.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from 'react-select';
+import { Icon } from 'src/components/Icon';
+const SelectMultiValueRemove = (props) => {
+    const { multipleItemIcon, multipleItemIconFill } = props.selectProps;
+    return (_jsx(components.MultiValueRemove, { ...props, children: _jsx(Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
+};
+export { SelectMultiValueRemove };