@alfalab/core-components-select 13.0.3 → 13.1.1

package/components/option/index.css

@@ -1,4 +1,4 @@
-/* hash: 129zm */
+/* hash: bsv27 */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-bg-secondary: #f3f4f5;
@@ -53,7 +53,7 @@
 
     /* optgroup */
 }
-.select__option_1mk9w {
+.select__option_1cz7y {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -69,11 +69,11 @@
     position: relative;
     cursor: pointer
 }
-.select__option_1mk9w:not(.select__disabled_1mk9w):active {
+.select__option_1cz7y:not(.select__disabled_1cz7y):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_1mk9w:before {
+.select__option_1cz7y:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -84,60 +84,60 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_1mk9w:first-child:before {
+.select__option_1cz7y:first-child:before {
         display: none;
     }
-.select__s_1mk9w {
+.select__s_1cz7y {
     min-height: var(--size-s-height);
 }
-.select__m_1mk9w {
+.select__m_1cz7y {
     min-height: var(--size-m-height);
 }
-.select__l_1mk9w {
+.select__l_1cz7y {
     min-height: var(--size-l-height);
 }
-.select__xl_1mk9w {
+.select__xl_1cz7y {
     min-height: var(--size-xl-height);
 }
-.select__l_1mk9w,
-.select__xl_1mk9w {
+.select__l_1cz7y,
+.select__xl_1cz7y {
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding)
 }
-.select__l_1mk9w:before, .select__xl_1mk9w:before {
+.select__l_1cz7y:before, .select__xl_1cz7y:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_1mk9w {
+.select__selected_1cz7y {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_1mk9w {
+.select__highlighted_1cz7y {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color)
 }
-.select__highlighted_1mk9w:before,
-    .select__highlighted_1mk9w + .select__option_1mk9w:before {
+.select__highlighted_1cz7y:before,
+    .select__highlighted_1cz7y + .select__option_1cz7y:before {
         opacity: 0;
     }
-.select__disabled_1mk9w {
+.select__disabled_1cz7y {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_1mk9w {
+.select__content_1cz7y {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_1mk9w {
+.select__textContent_1cz7y {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 }
 /* IE min-height fix */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__option_1mk9w:after {
+    .select__option_1cz7y:after {
         min-height: inherit;
         font-size: 0;
         content: '';

package/components/option/index.js

@@ -2,9 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox');
 require('../checkmark/Component.js');
 var components_option_Component = require('./Component.js');

package/components/options-list/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-e8cb2975.js');
+var tslib_es6 = require('../../tslib.es6-adf850c3.js');
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var styles = {"optionsList":"select__optionsList_oep5h","scrollable":"select__scrollable_oep5h","emptyPlaceholder":"select__emptyPlaceholder_oep5h","l":"select__l_oep5h","xl":"select__xl_oep5h"};
+var styles = {"optionsList":"select__optionsList_etn7g","scrollable":"select__scrollable_etn7g","emptyPlaceholder":"select__emptyPlaceholder_etn7g","l":"select__l_etn7g","xl":"select__xl_etn7g"};
 require('./index.css')
 
 var createCounter = function () {

package/components/options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 9htne */
+/* hash: 1uiff */
 :root {
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
@@ -26,21 +26,21 @@
 
     /* optgroup */
 }
-.select__optionsList_oep5h {
+.select__optionsList_etn7g {
     overflow: auto;
     width: 100%;
     outline: none;
     box-sizing: border-box;
 }
-.select__scrollable_oep5h {
+.select__scrollable_etn7g {
     overflow: auto;
     width: 100%;
 }
-.select__emptyPlaceholder_oep5h {
+.select__emptyPlaceholder_etn7g {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__l_oep5h .select__emptyPlaceholder_oep5h,
-.select__xl_oep5h .select__emptyPlaceholder_oep5h {
+.select__l_etn7g .select__emptyPlaceholder_etn7g,
+.select__xl_etn7g .select__emptyPlaceholder_etn7g {
     padding: var(--gap-xl) var(--gap-m);
 }

package/components/options-list/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/components/select-mobile/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,12 +12,16 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('../../Component-ed89ed0b.js');
+require('../../Component-ecfd1f2b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('@alfalab/core-components-form-control');
 require('../field/Component.js');
 require('../optgroup/Component.js');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox');
 require('../checkmark/Component.js');
 require('../option/Component.js');
@@ -27,13 +31,14 @@ require('../../Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-button');
-var presets_useSelectWithApply_hook = require('../../Component-21b7a86d.js');
-require('../base-select-mobile/checkmark/Component.js');
+var presets_useSelectWithApply_hook = require('../../Component-7546861a.js');
+require('../base-checkmark/Component.js');
 require('@alfalab/core-components-base-modal');
 require('../base-select-mobile/options-list/Component.js');
 require('react-virtual');
+require('../base-option/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-6dcf1728.js');
+require('../../intersection-observer-0340401e.js');
 
 
 

package/components/select-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-21b7a86d";
+export * from "../../Component-7546861a";

package/components/select-mobile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,12 +12,16 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('../../Component-ed89ed0b.js');
+require('../../Component-ecfd1f2b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('@alfalab/core-components-form-control');
 require('../field/Component.js');
 require('../optgroup/Component.js');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox');
 require('../checkmark/Component.js');
 require('../option/Component.js');
@@ -27,13 +31,14 @@ require('../../Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-button');
-var presets_useSelectWithApply_hook = require('../../Component-21b7a86d.js');
-require('../base-select-mobile/checkmark/Component.js');
+var presets_useSelectWithApply_hook = require('../../Component-7546861a.js');
+require('../base-checkmark/Component.js');
 require('@alfalab/core-components-base-modal');
 require('../base-select-mobile/options-list/Component.js');
 require('react-virtual');
+require('../base-option/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-6dcf1728.js');
+require('../../intersection-observer-0340401e.js');
 
 
 

package/components/select-modal-mobile/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,12 +12,16 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('../../Component-ed89ed0b.js');
+require('../../Component-ecfd1f2b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('@alfalab/core-components-form-control');
 require('../field/Component.js');
 require('../optgroup/Component.js');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox');
 require('../checkmark/Component.js');
 require('../option/Component.js');
@@ -27,13 +31,14 @@ require('../../Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-button');
-var presets_useSelectWithApply_hook = require('../../Component-21b7a86d.js');
-require('../base-select-mobile/checkmark/Component.js');
+var presets_useSelectWithApply_hook = require('../../Component-7546861a.js');
+require('../base-checkmark/Component.js');
 require('@alfalab/core-components-base-modal');
 require('../base-select-mobile/options-list/Component.js');
 require('react-virtual');
+require('../base-option/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-6dcf1728.js');
+require('../../intersection-observer-0340401e.js');
 
 
 

package/components/select-modal-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-21b7a86d";
+export * from "../../Component-7546861a";

package/components/select-modal-mobile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,12 +12,16 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('../../Component-ed89ed0b.js');
+require('../../Component-ecfd1f2b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('@alfalab/core-components-form-control');
 require('../field/Component.js');
 require('../optgroup/Component.js');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox');
 require('../checkmark/Component.js');
 require('../option/Component.js');
@@ -27,13 +31,14 @@ require('../../Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-button');
-var presets_useSelectWithApply_hook = require('../../Component-21b7a86d.js');
-require('../base-select-mobile/checkmark/Component.js');
+var presets_useSelectWithApply_hook = require('../../Component-7546861a.js');
+require('../base-checkmark/Component.js');
 require('@alfalab/core-components-base-modal');
 require('../base-select-mobile/options-list/Component.js');
 require('react-virtual');
+require('../base-option/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-6dcf1728.js');
+require('../../intersection-observer-0340401e.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-e8cb2975.js');
+var tslib_es6 = require('../../tslib.es6-adf850c3.js');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"virtualOptionsList":"select__virtualOptionsList_5gcfj","scrollable":"select__scrollable_5gcfj","inner":"select__inner_5gcfj","virtualRow":"select__virtualRow_5gcfj","highlighted":"select__highlighted_5gcfj","emptyPlaceholder":"select__emptyPlaceholder_5gcfj","l":"select__l_5gcfj","xl":"select__xl_5gcfj"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_1n0t9","scrollable":"select__scrollable_1n0t9","inner":"select__inner_1n0t9","virtualRow":"select__virtualRow_1n0t9","highlighted":"select__highlighted_1n0t9","emptyPlaceholder":"select__emptyPlaceholder_1n0t9","l":"select__l_1n0t9","xl":"select__xl_1n0t9"};
 require('./index.css')
 
 /* eslint-disable react-hooks/exhaustive-deps */

package/components/virtual-options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 184nu */
+/* hash: ivgfg */
 :root {
     --color-light-border-primary: #dbdee1;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -32,27 +32,27 @@
 
     /* optgroup */
 }
-.select__virtualOptionsList_5gcfj {
+.select__virtualOptionsList_1n0t9 {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
 }
-.select__scrollable_5gcfj {
+.select__scrollable_1n0t9 {
     overflow: auto;
     width: 100%;
 }
-.select__inner_5gcfj {
+.select__inner_1n0t9 {
     position: relative;
     width: 100%;
 }
-.select__virtualRow_5gcfj {
+.select__virtualRow_1n0t9 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
 }
-.select__virtualRow_5gcfj:before {
+.select__virtualRow_1n0t9:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -63,18 +63,18 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
     }
-.select__virtualRow_5gcfj:first-child:before {
+.select__virtualRow_1n0t9:first-child:before {
         display: none;
     }
-.select__highlighted_5gcfj:before,
-    .select__highlighted_5gcfj + .select__virtualRow_5gcfj:before {
+.select__highlighted_1n0t9:before,
+    .select__highlighted_1n0t9 + .select__virtualRow_1n0t9:before {
         display: none;
     }
-.select__emptyPlaceholder_5gcfj {
+.select__emptyPlaceholder_1n0t9 {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__l_5gcfj .select__emptyPlaceholder_5gcfj,
-.select__xl_5gcfj .select__emptyPlaceholder_5gcfj {
+.select__l_1n0t9 .select__emptyPlaceholder_1n0t9,
+.select__xl_1n0t9 .select__emptyPlaceholder_1n0t9 {
     padding: var(--gap-xl) var(--gap-m);
 }

package/components/virtual-options-list/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-e8cb2975.js');
+require('../../tslib.es6-adf850c3.js');
 require('react');
 require('classnames');
 require('@alfalab/hooks');

package/cssm/{Component-095a346d.js → Component-c7975bd7.js}

@@ -16,6 +16,11 @@ require('./components/field/index.module.css');
 var components_field_Component = require('./components/field/Component.js');
 require('./components/optgroup/index.module.css');
 var components_optgroup_Component = require('./components/optgroup/Component.js');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('./components/base-select-mobile/checkmark/index.module.css');
+var components_baseSelectMobile_checkmark_Component = require('./components/base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox/cssm');
 require('./components/checkmark/index.module.css');
 require('./components/option/index.module.css');
@@ -27,11 +32,14 @@ var coreComponentsBottomSheet = require('@alfalab/core-components-bottom-sheet/c
 var mobile = require('@alfalab/core-components-modal/cssm/mobile');
 var coreComponentsButton = require('@alfalab/core-components-button/cssm');
 var styles = require('./presets/useSelectWithApply/options-list-with-apply/index.module.css');
-var components_baseSelectMobile_checkmark_Component = require('./components/base-select-mobile/checkmark/Component.js');
+require('./components/base-checkmark/index.module.css');
+var components_baseCheckmark_Component = require('./components/base-checkmark/Component.js');
 var components_baseSelectMobile_optionsList_Component = require('./components/base-select-mobile/options-list/Component.js');
 var styles$1 = require('./components/base-select-mobile/index.module.css');
 require('react-virtual');
 require('./components/virtual-options-list/index.module.css');
+require('./components/base-option/index.module.css');
+var components_baseOption_Component = require('./components/base-option/Component.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('./presets/useSelectWithLoading/index.module.css');
 require('./presets/useLazyLoading/index.module.css');
@@ -293,14 +301,19 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
             openMenu();
         }
     };
-    var getOptionProps = function (option, index) { return (tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { className: cn__default['default'](styles__default$1['default'].option, optionClassName), innerProps: getItemProps({
-            index: index,
-            item: option,
-            disabled: option.disabled,
-            onMouseDown: function (event) { return event.preventDefault(); },
-        }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.includes(option), dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'option'), 
-        // eslint-disable-next-line react/no-unstable-nested-components
-        Checkmark: function () { return React__default['default'].createElement(components_baseSelectMobile_checkmark_Component.Checkmark, { selected: selectedItems.includes(option) }); } })); };
+    var getOptionProps = function (option, index) {
+        var selectedItem = selectedItems.includes(option);
+        return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { mobile: true, className: cn__default['default'](styles__default$1['default'].option, optionClassName), innerProps: getItemProps({
+                index: index,
+                item: option,
+                disabled: option.disabled,
+                onMouseDown: function (event) { return event.preventDefault(); },
+            }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItem, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'option'), 
+            // eslint-disable-next-line react/no-unstable-nested-components
+            Checkmark: function () {
+                return Option === components_baseOption_Component.BaseOption ? (React__default['default'].createElement(components_baseCheckmark_Component.BaseCheckmark, { selected: selectedItem, multiple: multiple })) : (React__default['default'].createElement(components_baseSelectMobile_checkmark_Component.Checkmark, { selected: selectedItem }));
+            } });
+    };
     React.useEffect(function () {
         if (defaultOpen)
             openMenu();
@@ -342,10 +355,10 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
             }, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && renderValue(),
         isBottomSheet ? (React__default['default'].createElement(coreComponentsBottomSheet.BottomSheet, tslib_es6.__assign({ open: open, onClose: handleClose, className: styles__default$1['default'].sheet, contentClassName: styles__default$1['default'].sheetContent, containerClassName: styles__default$1['default'].sheetContainer, title: placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable }, bottomSheetProps),
-            React__default['default'].createElement("div", tslib_es6.__assign({}, menuProps, { className: cn__default['default'](optionsListClassName, styles__default$1['default'].optionsList) }),
+            React__default['default'].createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
                 React__default['default'].createElement(OptionsListWithApply, tslib_es6.__assign({}, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: components_baseSelectMobile_optionsList_Component.OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default['default'](styles__default$1['default'].optionGroup, optionGroupClassName), showFooter: multiple, onApply: handleApply, onClear: handleClear }))))) : (React__default['default'].createElement(mobile.ModalMobile, { open: open, onClose: handleClose, contentClassName: styles__default$1['default'].sheetContent, hasCloser: true },
-            React__default['default'].createElement(mobile.ModalMobile.Header, { hasCloser: true, title: placeholder, sticky: true, className: styles__default$1['default'].sticky }),
-            React__default['default'].createElement("div", tslib_es6.__assign({}, menuProps, { className: cn__default['default'](optionsListClassName, styles__default$1['default'].optionsList) }),
+            React__default['default'].createElement(mobile.ModalMobile.Header, { hasCloser: true, title: placeholder, sticky: true }),
+            React__default['default'].createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
                 React__default['default'].createElement(OptionsListWithApply, tslib_es6.__assign({}, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: components_baseSelectMobile_optionsList_Component.OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default['default'](styles__default$1['default'].optionGroup, optionGroupClassName), showFooter: multiple, onApply: handleApply, onClear: handleClear })))))));
 });
 

package/cssm/Component.js

@@ -22,6 +22,11 @@ require('./components/field/index.module.css');
 var components_field_Component = require('./components/field/Component.js');
 require('./components/optgroup/index.module.css');
 var components_optgroup_Component = require('./components/optgroup/Component.js');
+require('@alfalab/core-components/badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('./components/base-select-mobile/checkmark/index.module.css');
+require('./components/base-select-mobile/checkmark/Component.js');
 require('@alfalab/core-components-checkbox/cssm');
 require('./components/checkmark/index.module.css');
 require('./components/checkmark/Component.js');

package/cssm/components/base-checkmark/Component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckmarkProps } from "../../typings";
+declare const BaseCheckmark: ({ selected, disabled, className, multiple, }: CheckmarkProps) => JSX.Element;
+export { BaseCheckmark };

package/cssm/components/base-checkmark/Component.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var CheckmarkMIcon = require('@alfalab/icons-glyph/CheckmarkMIcon');
+var coreComponentsCheckbox = require('@alfalab/core-components-checkbox/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var BaseCheckmark = function (_a) {
+    var _b;
+    var selected = _a.selected, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, multiple = _a.multiple;
+    var checkmarkClassNames = cn__default['default'](styles__default['default'].checkmark, className, (_b = {},
+        _b[styles__default['default'].multiple] = multiple,
+        _b[styles__default['default'].single] = !multiple,
+        _b[styles__default['default'].selected] = selected,
+        _b));
+    return multiple ? (React__default['default'].createElement(coreComponentsCheckbox.Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 'm', onClick: function (event) { return event.stopPropagation(); } })) : (React__default['default'].createElement(CheckmarkMIcon.CheckmarkMIcon, { className: checkmarkClassNames }));
+};
+
+exports.BaseCheckmark = BaseCheckmark;

package/cssm/components/base-checkmark/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/cssm/components/base-checkmark/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('@alfalab/core-components-checkbox/cssm');
+require('./index.module.css');
+var components_baseCheckmark_Component = require('./Component.js');
+
+
+
+exports.BaseCheckmark = components_baseCheckmark_Component.BaseCheckmark;

package/cssm/components/base-checkmark/index.module.css

@@ -0,0 +1,31 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* options list */
+
+    /* option */
+
+    /* checkmark */
+
+    /* optgroup */
+}
+.checkmark {
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+.single {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0
+}
+.single.selected {
+        opacity: 1;
+    }