@alfalab/core-components 48.9.0 → 48.10.0

package/select/moderncssm/index.js

@@ -37,16 +37,20 @@ import './components/field/index.module.css';
 import './components/optgroup/Component.js';
 import './consts.js';
 import './components/optgroup/index.module.css';
-import './components/option/Component.js';
-import './components/checkmark/Component.js';
 import '../../badge/moderncssm';
 import '../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark/index.module.css';
-import './components/checkmark-mobile/Component.js';
+import './components/option/desktop/index.module.css';
 import './components/checkmark-mobile/index.module.css';
-import './components/option/index.module.css';
+import './components/option/mobile/index.module.css';
+import './components/option/Component.responsive.js';
+import './components/option/desktop/Component.js';
+import './components/checkmark/Component.js';
+import './components/option/Component.js';
+import './components/option/mobile/Component.js';
+import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '../../scrollbar/moderncssm';
 import './components/options-list/index.module.css';

package/select/moderncssm/mobile/Component.mobile.js

@@ -7,13 +7,21 @@ 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 '../../../badge/moderncssm';
+import '../../../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';
 import { u as useSelectWithApply } from '../hook-50057c35.js';
 import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
-import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/ChevronDownSIcon';
 import '../components/arrow/index.module.css';
@@ -45,15 +53,11 @@ import '../../../button/moderncssm/mobile';
 import '../components/footer/index.module.css';
 import '../consts.js';
 import '../components/optgroup/index.module.css';
+import '../components/option/desktop/Component.js';
 import '../components/checkmark/Component.js';
-import '../../../badge/moderncssm';
-import '../../../checkbox/moderncssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '../components/checkmark/index.module.css';
+import '../components/option/Component.js';
+import '../components/option/mobile/Component.js';
 import '../components/checkmark-mobile/Component.js';
-import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
 import '../../../mq/moderncssm';
 import '../../../scrollbar/moderncssm';
 import '../components/options-list/index.module.css';
@@ -69,7 +73,7 @@ import '../presets/useSelectWithApply/options-list-with-apply/footer/index.modul
 import '../presets/useSelectWithApply/options-list-with-apply/header/index.module.css';
 
 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({
@@ -92,7 +96,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/select/moderncssm/mobile/Component.modal.mobile.js

@@ -40,16 +40,20 @@ import '../components/footer/index.module.css';
 import '../components/optgroup/Component.js';
 import '../consts.js';
 import '../components/optgroup/index.module.css';
-import '../components/option/Component.js';
-import '../components/checkmark/Component.js';
 import '../../../badge/moderncssm';
 import '../../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/index.module.css';
-import '../components/checkmark-mobile/Component.js';
+import '../components/option/desktop/index.module.css';
 import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
+import '../components/option/mobile/index.module.css';
+import '../components/option/Component.responsive.js';
+import '../components/option/desktop/Component.js';
+import '../components/checkmark/Component.js';
+import '../components/option/Component.js';
+import '../components/option/mobile/Component.js';
+import '../components/checkmark-mobile/Component.js';
 import '../components/options-list/Component.js';
 import '../../../mq/moderncssm';
 import '../../../scrollbar/moderncssm';

package/select/moderncssm/mobile/index.js

@@ -41,16 +41,20 @@ import '../components/footer/index.module.css';
 import '../components/optgroup/Component.js';
 import '../consts.js';
 import '../components/optgroup/index.module.css';
-import '../components/option/Component.js';
-import '../components/checkmark/Component.js';
 import '../../../badge/moderncssm';
 import '../../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/index.module.css';
-import '../components/checkmark-mobile/Component.js';
+import '../components/option/desktop/index.module.css';
 import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
+import '../components/option/mobile/index.module.css';
+import '../components/option/Component.responsive.js';
+import '../components/option/desktop/Component.js';
+import '../components/checkmark/Component.js';
+import '../components/option/Component.js';
+import '../components/option/mobile/Component.js';
+import '../components/checkmark-mobile/Component.js';
 import '../components/options-list/Component.js';
 import '../../../mq/moderncssm';
 import '../../../scrollbar/moderncssm';

package/select/moderncssm/presets/index.js

@@ -3,18 +3,22 @@ export { useLazyLoading } from './useLazyLoading/hook.js';
 export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-50057c35.js';
 import 'react';
 import '../../../skeleton/moderncssm';
-import '../components/option/Component.js';
 import 'classnames';
-import '../consts.js';
-import '../components/checkmark/Component.js';
 import '../../../badge/moderncssm';
 import '../../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/index.module.css';
-import '../components/checkmark-mobile/Component.js';
+import '../components/option/desktop/index.module.css';
 import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
+import '../components/option/mobile/index.module.css';
+import '../components/option/Component.responsive.js';
+import '../components/option/desktop/Component.js';
+import '../components/checkmark/Component.js';
+import '../components/option/Component.js';
+import '../consts.js';
+import '../components/option/mobile/Component.js';
+import '../components/checkmark-mobile/Component.js';
 import './useSelectWithLoading/index.module.css';
 import 'intersection-observer';
 import 'react-fast-compare';

package/select/moderncssm/presets/useLazyLoading/hook.js

@@ -1,18 +1,22 @@
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Skeleton } from '../../../../skeleton/moderncssm';
-import { Option } from '../../components/option/Component.js';
-import 'intersection-observer';
 import 'classnames';
-import '../../consts.js';
-import '../../components/checkmark/Component.js';
 import '../../../../badge/moderncssm';
 import '../../../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark/index.module.css';
-import '../../components/checkmark-mobile/Component.js';
+import '../../components/option/desktop/index.module.css';
 import '../../components/checkmark-mobile/index.module.css';
-import '../../components/option/index.module.css';
+import '../../components/option/mobile/index.module.css';
+import { OptionResponsive } from '../../components/option/Component.responsive.js';
+import 'intersection-observer';
+import '../../components/option/desktop/Component.js';
+import '../../components/checkmark/Component.js';
+import '../../components/option/Component.js';
+import '../../consts.js';
+import '../../components/option/mobile/Component.js';
+import '../../components/checkmark-mobile/Component.js';
 
 const DEBOUNCE_TIMEOUT = 300;
 const actions = {
@@ -42,7 +46,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 = {
@@ -195,7 +199,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/select/moderncssm/presets/useSelectWithLoading/hook.js

@@ -1,21 +1,25 @@
 import React from 'react';
 import { Skeleton } from '../../../../skeleton/moderncssm';
-import { Option } from '../../components/option/Component.js';
-import styles from './index.module.css';
 import 'classnames';
-import '../../consts.js';
-import '../../components/checkmark/Component.js';
 import '../../../../badge/moderncssm';
 import '../../../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark/index.module.css';
-import '../../components/checkmark-mobile/Component.js';
+import '../../components/option/desktop/index.module.css';
 import '../../components/checkmark-mobile/index.module.css';
-import '../../components/option/index.module.css';
+import '../../components/option/mobile/index.module.css';
+import { OptionResponsive } from '../../components/option/Component.responsive.js';
+import styles from './index.module.css';
+import '../../components/option/desktop/Component.js';
+import '../../components/checkmark/Component.js';
+import '../../components/option/Component.js';
+import '../../consts.js';
+import '../../components/option/mobile/Component.js';
+import '../../components/checkmark-mobile/Component.js';
 
-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/select/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';
@@ -14,18 +16,20 @@ export { Footer } from '../components/footer/Component.js';
 export { Search } from '../components/search/Component.js';
 import 'react';
 import '../../../skeleton/moderncssm';
-import '../presets/useSelectWithLoading/index.module.css';
 import 'classnames';
-import '../consts.js';
-import '../components/checkmark/Component.js';
 import '../../../badge/moderncssm';
 import '../../../checkbox/moderncssm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/index.module.css';
-import '../components/checkmark-mobile/Component.js';
+import '../components/option/desktop/index.module.css';
 import '../components/checkmark-mobile/index.module.css';
-import '../components/option/index.module.css';
+import '../components/option/mobile/index.module.css';
+import '../presets/useSelectWithLoading/index.module.css';
+import '../components/checkmark/Component.js';
+import '../components/option/Component.js';
+import '../consts.js';
+import '../components/checkmark-mobile/Component.js';
 import 'intersection-observer';
 import 'react-fast-compare';
 import '../presets/useSelectWithApply/options-list-with-apply/footer/Component.js';

package/select/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/select/presets/index.js

@@ -2,7 +2,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-6e674d97.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-e07a6d8c.js');
 
 
 

package/select/presets/useLazyLoading/hook.js

@@ -3,7 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('../../../skeleton');
-var components_option_Component = require('../../components/option/Component.js');
+require('classnames');
+require('../../../badge');
+require('../../../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 }; }
@@ -39,7 +44,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/select/presets/useSelectWithApply/hook.js

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

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

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

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

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

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

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

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

@@ -9,7 +9,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_u9r3v","mobile":"select__mobile_u9r3v"};
+var styles = {"desktop":"select__desktop_ahzwp","mobile":"select__mobile_ahzwp"};
 require('./index.css');
 
 var Header = function (_a) {

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

@@ -22,8 +22,8 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .select__desktop_u9r3v {
+} /* сбрасывает синюю подсветку при нажатии */ .select__desktop_ahzwp {
     padding: var(--gap-12);
-} .select__mobile_u9r3v {
+} .select__mobile_ahzwp {
     padding: var(--gap-12) var(--gap-8);
 }

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

@@ -1 +1 @@
-export * from "../../../hook-6e674d97";
+export * from "../../../hook-e07a6d8c";

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-6e674d97.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-e07a6d8c.js');
 
 
 

package/select/presets/useSelectWithLoading/hook.js

@@ -3,17 +3,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('../../../skeleton');
-var components_option_Component = require('../../components/option/Component.js');
+require('classnames');
+require('../../../badge');
+require('../../../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_16ru3"};
+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/select/presets/useSelectWithLoading/index.css

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

package/select/shared/index.js

@@ -2,9 +2,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-6e674d97.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');
@@ -33,7 +35,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/select/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/select-with-tags/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-declare const SelectWithTags: React.ForwardRefExoticComponent<Omit<import("../select/typings").BaseSelectProps, "multiple" | "onChange" | "selected" | "autocomplete" | "nativeSelect" | "Field"> & {
+declare const SelectWithTags: React.ForwardRefExoticComponent<Omit<import("../select/typings").BaseSelectProps, "onChange" | "autocomplete" | "multiple" | "selected" | "nativeSelect" | "Field"> & {
     value: string;
     onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     selected?: (string | import("../select/typings").OptionShape)[] | undefined;

package/select-with-tags/components/base-select-with-tags/Component.d.ts

@@ -5,7 +5,7 @@ import { BottomSheetProps } from "../../../bottom-sheet";
 import { FormControlProps } from "../../../form-control";
 import { PopoverProps } from "../../../popover";
 import { BaseSelectProps, OptionShape } from "../../../select/shared";
-declare const BaseSelectWithTags: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "multiple" | "onChange" | "selected" | "autocomplete" | "nativeSelect" | "Field"> & {
+declare const BaseSelectWithTags: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onChange" | "autocomplete" | "multiple" | "selected" | "nativeSelect" | "Field"> & {
     value: string;
     onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     selected?: (string | OptionShape)[] | undefined;

package/select-with-tags/components/tag/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 = {"tag":"select-with-tags__tag_1ipz3","tagNoClose":"select-with-tags__tagNoClose_1ipz3","tagContentWrap":"select-with-tags__tagContentWrap_1ipz3","cursorPointer":"select-with-tags__cursorPointer_1ipz3","tagCross":"select-with-tags__tagCross_1ipz3"};
+var styles = {"tag":"select-with-tags__tag_18617","tagNoClose":"select-with-tags__tagNoClose_18617","tagContentWrap":"select-with-tags__tagContentWrap_18617","cursorPointer":"select-with-tags__cursorPointer_18617","tagCross":"select-with-tags__tagCross_18617"};
 require('./index.css');
 
 var Tag = function (_a) {

package/select-with-tags/components/tag/index.css

@@ -60,40 +60,40 @@
     /* mobile */
 
     /* mobile inverted */
-} .select-with-tags__tag_1ipz3 {
+} .select-with-tags__tag_18617 {
     padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-8);
     margin: var(--gap-2);
     cursor: default
-} .select-with-tags__tag_1ipz3:not(.select-with-tags__tagNoClose_1ipz3):active:not(:disabled) {
+} .select-with-tags__tag_18617:not(.select-with-tags__tagNoClose_18617):active:not(:disabled) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_1ipz3:not(.select-with-tags__tagNoClose_1ipz3):hover:not(:disabled):not(:active) {
+    } .select-with-tags__tag_18617:not(.select-with-tags__tagNoClose_18617):hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_1ipz3 > span {
+    } .select-with-tags__tag_18617 > span {
         width: 100%;
         height: 100%;
-    } .select-with-tags__tag_1ipz3.select-with-tags__tag_1ipz3 {
+    } .select-with-tags__tag_18617.select-with-tags__tag_18617 {
     min-width: unset;
-} .select-with-tags__tagNoClose_1ipz3 {
+} .select-with-tags__tagNoClose_18617 {
     padding-right: var(--gap-8);
     padding-left: var(--gap-8);
-} .select-with-tags__tagContentWrap_1ipz3 {
+} .select-with-tags__tagContentWrap_18617 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 100%;
-} .select-with-tags__cursorPointer_1ipz3 {
+} .select-with-tags__cursorPointer_18617 {
     cursor: pointer;
-} .select-with-tags__tagCross_1ipz3 {
+} .select-with-tags__tagCross_18617 {
     padding: var(--gap-0) 6px;
     height: 100%
-} .select-with-tags__tagCross_1ipz3 > svg {
+} .select-with-tags__tagCross_18617 > svg {
         fill: var(--color-light-neutral-translucent-700-inverted);
-    } .select-with-tags__tagCross_1ipz3:hover > svg {
+    } .select-with-tags__tagCross_18617:hover > svg {
         fill: var(--color-light-neutral-translucent-700-inverted-hover);
-    } .select-with-tags__tagCross_1ipz3:active > svg {
+    } .select-with-tags__tagCross_18617:active > svg {
         fill: var(--color-light-neutral-translucent-700-inverted-press);
-    } .select-with-tags__tagCross_1ipz3 svg {
+    } .select-with-tags__tagCross_18617 svg {
         height: 100%;
     }