@alfalab/core-components-select 17.19.0 → 17.20.0

package/moderncssm/components/virtual-options-list/Component.js

@@ -95,9 +95,9 @@ const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlighte
             const group = options[groupStartIndexes[virtualRow.index]];
             if (!group)
                 return null;
-            const groupSelectedItems = selectedItems?.filter((item) => group.options.includes(item));
+            const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) => group.options.some((opt) => opt.key === selectedItemKey));
             const handleSelectedItems = (items) => {
-                setSelectedItems((selectedItems?.filter((item) => !group.options.includes(item)) ?? []).concat(items));
+                setSelectedItems((selectedItems?.filter(({ key: selectedItemKey }) => !group.options.some((opt) => opt.key === selectedItemKey)) ?? []).concat(items));
             };
             return (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple, ...groupOptionProps }));
         };

package/moderncssm/desktop/Component.desktop.js

@@ -5,11 +5,20 @@ import { Arrow } from '../components/arrow/Component.js';
 import { BaseSelect } from '../components/base-select/Component.js';
 import { Field } from '../components/field/Component.js';
 import { Optgroup } from '../components/optgroup/Component.js';
-import { Option } from '../components/option/Component.js';
+import 'classnames';
+import '@alfalab/core-components-badge/moderncssm';
+import '@alfalab/core-components-checkbox/moderncssm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/checkmark/index.module.css';
+import '../components/option/desktop/index.module.css';
+import '../components/checkmark-mobile/index.module.css';
+import '../components/option/mobile/index.module.css';
+import { OptionResponsive } from '../components/option/Component.responsive.js';
 import { OptionsList } from '../components/options-list/Component.js';
 import { Search } from '../components/search/Component.js';
 
-const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option$1, Field: Field$1, fieldProps: {
+const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option = OptionResponsive, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option, Field: Field$1, fieldProps: {
         FormControlComponent: FormControlDesktop,
         ...fieldProps,
     }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover, ...restProps })));

package/moderncssm/mobile/Component.mobile.js

@@ -7,7 +7,16 @@ import { BaseSelect } from '../components/base-select/Component.js';
 import { Field } from '../components/field/Component.js';
 import { Footer } from '../components/footer/Component.js';
 import { Optgroup } from '../components/optgroup/Component.js';
-import { Option } from '../components/option/Component.js';
+import 'classnames';
+import '@alfalab/core-components-badge/moderncssm';
+import '@alfalab/core-components-checkbox/moderncssm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/checkmark/index.module.css';
+import '../components/option/desktop/index.module.css';
+import '../components/checkmark-mobile/index.module.css';
+import '../components/option/mobile/index.module.css';
+import { OptionResponsive } from '../components/option/Component.responsive.js';
 import { OptionsList } from '../components/options-list/Component.js';
 import { Search } from '../components/search/Component.js';
 import { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
@@ -15,7 +24,7 @@ import { u as useSelectWithApply } from '../hook-50057c35.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
-const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 56, optionsSize = 56, fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 56, optionsSize = 56, fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option = OptionResponsive, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
     ? VirtualOptionsList
     : OptionsList, onChange, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
     const applyProps = useSelectWithApply({
@@ -38,7 +47,7 @@ const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allow
     return (React.createElement(BaseSelect, { ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: {
             FormControlComponent: FormControlMobile,
             ...fieldProps,
-        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile, optionsListProps: optionsListProps, ...restProps, ...(restProps.isBottomSheet === false
+        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option, Search: Search$1, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile, optionsListProps: optionsListProps, ...restProps, ...(restProps.isBottomSheet === false
             ? {
                 modalHeaderProps: {
                     bottomAddons,

package/moderncssm/presets/useLazyLoading/hook.js

@@ -1,6 +1,15 @@
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
-import { Option } from '../../components/option/Component.js';
+import 'classnames';
+import '@alfalab/core-components-badge/moderncssm';
+import '@alfalab/core-components-checkbox/moderncssm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../../components/checkmark/index.module.css';
+import '../../components/option/desktop/index.module.css';
+import '../../components/checkmark-mobile/index.module.css';
+import '../../components/option/mobile/index.module.css';
+import { OptionResponsive } from '../../components/option/Component.responsive.js';
 import 'intersection-observer';
 
 const DEBOUNCE_TIMEOUT = 300;
@@ -31,7 +40,7 @@ const skeletonStyle = {
     height: '16px',
     width: '50%',
 };
-function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleton = React.createElement(Skeleton, { style: skeletonStyle, visible: true }), Option: Option$1 = Option, }) {
+function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleton = React.createElement(Skeleton, { style: skeletonStyle, visible: true }), Option = OptionResponsive, }) {
     const initialOptions = [];
     const initialLoading = false;
     const lazyLoadingInitialState = {
@@ -184,7 +193,7 @@ function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleto
         }, DEBOUNCE_TIMEOUT);
         /* eslint-enable */
     }, []);
-    const renderOption = (props) => (React.createElement(Option$1, { ...props, highlighted: loading ? false : props.highlighted }));
+    const renderOption = (props) => (React.createElement(Option, { ...props, highlighted: loading ? false : props.highlighted }));
     const skeletonOptions = useMemo(() => Array(loading ? limit : 0)
         .fill(0)
         .map((_, key) => ({

package/moderncssm/presets/useSelectWithLoading/hook.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
-import { Option } from '../../components/option/Component.js';
+import 'classnames';
+import '@alfalab/core-components-badge/moderncssm';
+import '@alfalab/core-components-checkbox/moderncssm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../../components/checkmark/index.module.css';
+import '../../components/option/desktop/index.module.css';
+import '../../components/checkmark-mobile/index.module.css';
+import '../../components/option/mobile/index.module.css';
+import { OptionResponsive } from '../../components/option/Component.responsive.js';
 import styles from './index.module.css';
 
-function useSelectWithLoading({ loading = false, visibleOptions = 6, Option: Option$1 = Option, }) {
-    const renderOption = (props) => (React.createElement(Option$1, { ...props, Checkmark: null, highlighted: loading ? false : props.highlighted }));
+function useSelectWithLoading({ loading = false, visibleOptions = 6, Option = OptionResponsive, }) {
+    const renderOption = (props) => (React.createElement(Option, { ...props, Checkmark: null, highlighted: loading ? false : props.highlighted }));
     const options = Array(visibleOptions)
         .fill(0)
         .map((_, key) => ({

package/moderncssm/shared/index.js

@@ -2,7 +2,9 @@ export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
 export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-50057c35.js';
 export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions } from '../utils.js';
-export { Option } from '../components/option/Component.js';
+export { OptionDesktop } from '../components/option/desktop/Component.js';
+export { OptionMobile } from '../components/option/mobile/Component.js';
+export { OptionResponsive as Option } from '../components/option/Component.responsive.js';
 export { BaseOption } from '../components/base-option/Component.js';
 export { OptionsList } from '../components/options-list/Component.js';
 export { VirtualOptionsList } from '../components/virtual-options-list/Component.js';

package/moderncssm/typings.d.ts

@@ -567,7 +567,7 @@ type OptgroupProps = {
      */
     multiple?: boolean;
 };
-type OptionProps = {
+type OptionCommonProps = {
     /**
      * Дополнительный класс
      */
@@ -631,8 +631,10 @@ type OptionProps = {
      * Выравнивание чекбокса или иконки "галочки"
      */
     align?: 'start' | 'center';
+};
+type OptionProps = OptionCommonProps & {
     /**
-     * Мобильная верcия option.
+     * Мобильная версия option.
      */
     mobile?: boolean;
 };
@@ -768,4 +770,4 @@ type ClearButtonProps = {
      */
     size?: FormControlProps['size'];
 };
-export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };
+export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionCommonProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "17.19.0",
+    "version": "17.20.0",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",

package/presets/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-639eaf6a.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-e07a6d8c.js');
 
 
 

package/presets/useLazyLoading/hook.js

@@ -5,7 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('@alfalab/core-components-skeleton');
-var components_option_Component = require('../../components/option/Component.js');
+require('classnames');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-checkbox');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+var components_option_Component_responsive = require('../../components/option/Component.responsive.js');
 require('intersection-observer');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -41,7 +46,7 @@ var skeletonStyle = {
     width: '50%',
 };
 function useLazyLoading(_a) {
-    var _b = _a.limit, limit = _b === void 0 ? 10 : _b, _c = _a.initialOffset, initialOffset = _c === void 0 ? 0 : _c, optionsFetcher = _a.optionsFetcher, _d = _a.skeleton, skeleton = _d === void 0 ? React__default.default.createElement(coreComponentsSkeleton.Skeleton, { style: skeletonStyle, visible: true }) : _d, _e = _a.Option, Option = _e === void 0 ? components_option_Component.Option : _e;
+    var _b = _a.limit, limit = _b === void 0 ? 10 : _b, _c = _a.initialOffset, initialOffset = _c === void 0 ? 0 : _c, optionsFetcher = _a.optionsFetcher, _d = _a.skeleton, skeleton = _d === void 0 ? React__default.default.createElement(coreComponentsSkeleton.Skeleton, { style: skeletonStyle, visible: true }) : _d, _e = _a.Option, Option = _e === void 0 ? components_option_Component_responsive.OptionResponsive : _e;
     var initialOptions = [];
     var initialLoading = false;
     var lazyLoadingInitialState = {

package/presets/useSelectWithApply/hook.js

@@ -6,7 +6,7 @@ require('tslib');
 require('react');
 require('react-fast-compare');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-639eaf6a.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-e07a6d8c.js');
 
 
 

package/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -6,7 +6,7 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-639eaf6a.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-e07a6d8c.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

package/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"footer":"select__footer_15tub","button":"select__button_15tub"};
+var styles = {"footer":"select__footer_1p1bl","button":"select__button_1p1bl"};
 require('./index.css')
 
 var Footer = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1hwep */
+/* hash: 1v2br */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-base-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -25,10 +25,10 @@
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --select-option-list-footer-button-gap: var(--gap-8);
-} .select__footer_15tub {
+} .select__footer_1p1bl {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none
-} .select__footer_15tub > .select__button_15tub + .select__button_15tub {
+} .select__footer_1p1bl > .select__button_1p1bl + .select__button_1p1bl {
         margin-left: var(--select-option-list-footer-button-gap);
     }

package/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"desktop":"select__desktop_iyr56","mobile":"select__mobile_iyr56"};
+var styles = {"desktop":"select__desktop_ahzwp","mobile":"select__mobile_ahzwp"};
 require('./index.css')
 
 var Header = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 14ykw */
+/* hash: 1i4hz */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,8 +22,8 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .select__desktop_iyr56 {
+} /* сбрасывает синюю подсветку при нажатии */ .select__desktop_ahzwp {
     padding: var(--gap-12);
-} .select__mobile_iyr56 {
+} .select__mobile_ahzwp {
     padding: var(--gap-12) var(--gap-8);
 }

package/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-639eaf6a";
+export * from "../../../hook-e07a6d8c";

package/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-639eaf6a.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-e07a6d8c.js');
 
 
 

package/presets/useSelectWithLoading/hook.js

@@ -5,17 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('@alfalab/core-components-skeleton');
-var components_option_Component = require('../../components/option/Component.js');
+require('classnames');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-checkbox');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+var components_option_Component_responsive = require('../../components/option/Component.responsive.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_13ypz"};
+var styles = {"skeleton":"select__skeleton_6w1ig"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {
-    var _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.visibleOptions, visibleOptions = _c === void 0 ? 6 : _c, _d = _a.Option, Option = _d === void 0 ? components_option_Component.Option : _d;
+    var _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.visibleOptions, visibleOptions = _c === void 0 ? 6 : _c, _d = _a.Option, Option = _d === void 0 ? components_option_Component_responsive.OptionResponsive : _d;
     var renderOption = function (props) { return (React__default.default.createElement(Option, tslib.__assign({}, props, { Checkmark: null, highlighted: loading ? false : props.highlighted }))); };
     var options = Array(visibleOptions)
         .fill(0)

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 1lqlg */
-.select__skeleton_13ypz {
+/* hash: ycvmk */
+.select__skeleton_6w1ig {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/shared/index.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-639eaf6a.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-e07a6d8c.js');
 var utils = require('../utils.js');
-var components_option_Component = require('../components/option/Component.js');
+var components_option_desktop_Component = require('../components/option/desktop/Component.js');
+var components_option_mobile_Component = require('../components/option/mobile/Component.js');
+var components_option_Component_responsive = require('../components/option/Component.responsive.js');
 var components_baseOption_Component = require('../components/base-option/Component.js');
 var components_optionsList_Component = require('../components/options-list/Component.js');
 var components_virtualOptionsList_Component = require('../components/virtual-options-list/Component.js');
@@ -35,7 +37,9 @@ exports.processOptions = utils.processOptions;
 exports.usePrevious = utils.usePrevious;
 exports.useVirtualVisibleOptions = utils.useVirtualVisibleOptions;
 exports.useVisibleOptions = utils.useVisibleOptions;
-exports.Option = components_option_Component.Option;
+exports.OptionDesktop = components_option_desktop_Component.OptionDesktop;
+exports.OptionMobile = components_option_mobile_Component.OptionMobile;
+exports.Option = components_option_Component_responsive.OptionResponsive;
 exports.BaseOption = components_baseOption_Component.BaseOption;
 exports.OptionsList = components_optionsList_Component.OptionsList;
 exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;

package/src/components/option/Component.responsive.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import type { OptionProps } from '../../typings';
+
+import { OptionDesktop } from './desktop/Component'
+import { OptionMobile } from './mobile/Component'
+
+export const OptionResponsive = ({mobile, ...props}: OptionProps) =>
+    mobile ? <OptionMobile {...props} /> : <OptionDesktop {...props} />

package/src/components/option/Component.tsx

@@ -2,13 +2,23 @@ import React, { FC, isValidElement } from 'react';
 import cn from 'classnames';
 
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
-import { OptionProps } from '../../typings';
-import { Checkmark as DefaultCheckMark } from '../checkmark';
-import { Checkmark as DefaultMobileCheckmark } from '../checkmark-mobile';
+import { OptionCommonProps } from '../../typings';
 
-import styles from './index.module.css';
+import type stylesDesktop from './desktop/index.module.css';
+import type stylesMobile from './mobile/index.module.css';
 
-export const Option: FC<OptionProps> = ({
+type OptionPrivateProps = {
+    /**
+     * Мобильная версия option.
+     */
+    mobile: boolean;
+    /**
+     * Стили
+     */
+    styles: typeof stylesDesktop | typeof stylesMobile;
+};
+
+export const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({
     size = 48,
     className,
     option,
@@ -18,9 +28,10 @@ export const Option: FC<OptionProps> = ({
     disabled,
     multiple,
     mobile,
-    Checkmark = mobile ? DefaultMobileCheckmark : DefaultCheckMark,
+    Checkmark,
     innerProps,
     dataTestId,
+    styles,
 }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;

package/src/components/option/desktop/Component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import type { OptionCommonProps } from '../../../typings';
+import { Checkmark as DefaultCheckMark } from '../../checkmark';
+import { OptionBase } from '../Component';
+
+import styles from './index.module.css';
+
+export const OptionDesktop = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (
+    <OptionBase {...props} mobile={false} Checkmark={Checkmark} styles={styles} />
+);

package/src/components/option/desktop/index.module.css

@@ -0,0 +1,13 @@
+@import '@alfalab/core-components-vars/src/index.css';
+@import '../../../vars.css';
+@import '../index.module.css';
+
+.highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color);
+
+    &:before,
+    & + .option:before {
+        opacity: 0;
+    }
+}

package/src/components/option/index.ts

@@ -1 +1,3 @@
-export * from './Component';
+export * from './desktop/Component';
+export * from './mobile/Component';
+export { OptionResponsive as Option } from './Component.responsive';

package/src/components/option/mobile/Component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import type { OptionCommonProps } from '../../../typings';
+import { Checkmark as DefaultCheckMark } from '../../checkmark-mobile';
+import { OptionBase } from '../Component';
+
+import styles from './index.module.css';
+
+export const OptionMobile = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (
+    <OptionBase {...props} mobile={true} Checkmark={Checkmark} styles={styles} />
+);

package/src/components/option/mobile/index.module.css

@@ -0,0 +1,3 @@
+@import '@alfalab/core-components-vars/src/index.css';
+@import '../../../vars.css';
+@import '../index.module.css';

package/src/components/virtual-options-list/Component.tsx

@@ -149,13 +149,16 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
 
                     if (!group) return null;
 
-                    const groupSelectedItems = selectedItems?.filter((item) =>
-                        group.options.includes(item),
+                    const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>
+                        group.options.some((opt) => opt.key === selectedItemKey),
                     );
                     const handleSelectedItems = (items: OptionShape[]) => {
                         setSelectedItems(
                             (
-                                selectedItems?.filter((item) => !group.options.includes(item)) ?? []
+                                selectedItems?.filter(
+                                    ({ key: selectedItemKey }) =>
+                                        !group.options.some((opt) => opt.key === selectedItemKey),
+                                ) ?? []
                             ).concat(items),
                         );
                     };

package/src/typings.ts

@@ -723,7 +723,7 @@ export type OptgroupProps = {
     multiple?: boolean;
 };
 
-export type OptionProps = {
+export type OptionCommonProps = {
     /**
      * Дополнительный класс
      */
@@ -801,9 +801,11 @@ export type OptionProps = {
      * Выравнивание чекбокса или иконки "галочки"
      */
     align?: 'start' | 'center';
+};
 
+export type OptionProps = OptionCommonProps & {
     /**
-     * Мобильная верcия option.
+     * Мобильная версия option.
      */
     mobile?: boolean;
 };