@alfalab/core-components 48.9.0 → 48.10.0

package/select/cssm/components/option/desktop/index.module.css

@@ -0,0 +1,134 @@
+: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-modal-bg-primary: #fff;
+    --color-light-neutral-400: #d2d3d9;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :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 */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+    --gap-0: 0;
+    --gap-12: var(--gap-s);
+    --gap-16: var(--gap-m);
+} :root {
+} :root {
+    --disabled-cursor: not-allowed;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+
+    /* options list */
+    --select-option-divider-display: none;
+    --select-option-divider-background: var(--color-light-neutral-400);
+
+    /* option */
+
+    --select-option-left-padding: var(--gap-12);
+    --select-option-right-padding: var(--gap-12);
+    --select-option-l-left-padding: var(--gap-16);
+    --select-option-l-right-padding: var(--gap-16);
+    --select-option-background: var(--color-light-modal-bg-primary);
+    --select-option-selected-background: var(--color-light-modal-bg-primary);
+    --select-option-hover-background: var(--color-light-transparent-default-hover);
+    --select-option-active-background: var(--color-light-transparent-default-press);
+    --select-option-disabled-background: var(--color-light-modal-bg-primary);
+    --select-option-color: var(--color-light-text-primary);
+    --select-option-selected-color: var(--color-light-text-primary);
+    --select-option-hover-color: var(--color-light-text-primary);
+    --select-option-active-color: var(--color-light-text-primary);
+    --select-option-disabled-color: var(--color-light-text-secondary);
+
+    /* checkmark */
+
+    /* optgroup */
+} .option {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    padding-left: var(--select-option-left-padding);
+    padding-right: var(--select-option-right-padding);
+    transition: background-color 0.2s ease;
+    background: var(--select-option-background);
+    color: var(--select-option-color);
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer
+} .option:not(.disabled):active {
+        background: var(--select-option-active-background);
+        color: var(--select-option-active-color);
+    } .option:before {
+        content: '';
+        position: absolute;
+        left: var(--select-option-left-padding);
+        right: var(--select-option-right-padding);
+        top: var(--gap-0);
+        height: 1px;
+        background: var(--select-option-divider-background);
+        display: var(--select-option-divider-display);
+        transition: opacity 0.2s ease;
+    } .option:first-child:before {
+        display: none;
+    } .size-48 {
+    min-height: var(--size-s-height);
+} .size-56 {
+    min-height: var(--size-m-height);
+} .size-64 {
+    min-height: var(--size-l-height);
+} .size-72 {
+    min-height: var(--size-xl-height);
+} .size-64,
+.size-72 {
+    padding-left: var(--select-option-l-left-padding);
+    padding-right: var(--select-option-l-right-padding)
+} .size-64:before, .size-72:before {
+        left: var(--select-option-l-left-padding);
+        right: var(--select-option-l-right-padding);
+    } .selected {
+    background: var(--select-option-selected-background);
+    color: var(--select-option-selected-color);
+    cursor: default;
+} .highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color)
+} .highlighted:before,
+    .highlighted + .option:before {
+        opacity: 0;
+    } .disabled {
+    cursor: var(--disabled-cursor);
+    background: var(--select-option-disabled-background);
+    color: var(--select-option-disabled-color);
+} .content {
+    overflow: hidden;
+    flex: 1;
+    text-overflow: ellipsis;
+} .textContent {
+    padding-top: var(--gap-12);
+    padding-bottom: var(--gap-12);
+} .highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color)
+} .highlighted:before,
+    .highlighted + .option:before {
+        opacity: 0;
+    }

package/select/cssm/components/option/index.d.ts

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

package/select/cssm/components/option/index.js

@@ -1,7 +1,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_option_Component = require('./Component.js');
+var components_option_desktop_Component = require('./desktop/Component.js');
+var components_option_mobile_Component = require('./mobile/Component.js');
+var components_option_Component_responsive = require('./Component.responsive.js');
 
 
 
-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;

package/select/cssm/components/option/mobile/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionCommonProps } from "../../../typings";
+declare const OptionMobile: ({ Checkmark, ...props }: OptionCommonProps) => React.JSX.Element;
+export { OptionMobile };

package/select/cssm/components/option/mobile/Component.js

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_checkmarkMobile_Component = require('../../checkmark-mobile/Component.js');
+var components_option_Component = require('../Component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var OptionMobile = function (_a) {
+    var _b = _a.Checkmark, Checkmark = _b === void 0 ? components_checkmarkMobile_Component.Checkmark : _b, props = tslib.__rest(_a, ["Checkmark"]);
+    return (React__default.default.createElement(components_option_Component.OptionBase, tslib.__assign({}, props, { mobile: true, Checkmark: Checkmark, styles: styles__default.default })));
+};
+
+exports.OptionMobile = OptionMobile;

package/select/cssm/components/option/mobile/index.module.css

@@ -0,0 +1,128 @@
+: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-modal-bg-primary: #fff;
+    --color-light-neutral-400: #d2d3d9;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :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 */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+    --gap-0: 0;
+    --gap-12: var(--gap-s);
+    --gap-16: var(--gap-m);
+} :root {
+} :root {
+    --disabled-cursor: not-allowed;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+
+    /* options list */
+    --select-option-divider-display: none;
+    --select-option-divider-background: var(--color-light-neutral-400);
+
+    /* option */
+
+    --select-option-left-padding: var(--gap-12);
+    --select-option-right-padding: var(--gap-12);
+    --select-option-l-left-padding: var(--gap-16);
+    --select-option-l-right-padding: var(--gap-16);
+    --select-option-background: var(--color-light-modal-bg-primary);
+    --select-option-selected-background: var(--color-light-modal-bg-primary);
+    --select-option-hover-background: var(--color-light-transparent-default-hover);
+    --select-option-active-background: var(--color-light-transparent-default-press);
+    --select-option-disabled-background: var(--color-light-modal-bg-primary);
+    --select-option-color: var(--color-light-text-primary);
+    --select-option-selected-color: var(--color-light-text-primary);
+    --select-option-hover-color: var(--color-light-text-primary);
+    --select-option-active-color: var(--color-light-text-primary);
+    --select-option-disabled-color: var(--color-light-text-secondary);
+
+    /* checkmark */
+
+    /* optgroup */
+} .option {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    padding-left: var(--select-option-left-padding);
+    padding-right: var(--select-option-right-padding);
+    transition: background-color 0.2s ease;
+    background: var(--select-option-background);
+    color: var(--select-option-color);
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer
+} .option:not(.disabled):active {
+        background: var(--select-option-active-background);
+        color: var(--select-option-active-color);
+    } .option:before {
+        content: '';
+        position: absolute;
+        left: var(--select-option-left-padding);
+        right: var(--select-option-right-padding);
+        top: var(--gap-0);
+        height: 1px;
+        background: var(--select-option-divider-background);
+        display: var(--select-option-divider-display);
+        transition: opacity 0.2s ease;
+    } .option:first-child:before {
+        display: none;
+    } .size-48 {
+    min-height: var(--size-s-height);
+} .size-56 {
+    min-height: var(--size-m-height);
+} .size-64 {
+    min-height: var(--size-l-height);
+} .size-72 {
+    min-height: var(--size-xl-height);
+} .size-64,
+.size-72 {
+    padding-left: var(--select-option-l-left-padding);
+    padding-right: var(--select-option-l-right-padding)
+} .size-64:before, .size-72:before {
+        left: var(--select-option-l-left-padding);
+        right: var(--select-option-l-right-padding);
+    } .selected {
+    background: var(--select-option-selected-background);
+    color: var(--select-option-selected-color);
+    cursor: default;
+} .highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color)
+} .highlighted:before,
+    .highlighted + .option:before {
+        opacity: 0;
+    } .disabled {
+    cursor: var(--disabled-cursor);
+    background: var(--select-option-disabled-background);
+    color: var(--select-option-disabled-color);
+} .content {
+    overflow: hidden;
+    flex: 1;
+    text-overflow: ellipsis;
+} .textContent {
+    padding-top: var(--gap-12);
+    padding-bottom: var(--gap-12);
+}

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

@@ -111,12 +111,16 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
                 var group = options[groupStartIndexes[virtualRow.index]];
                 if (!group)
                     return null;
-                var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
-                    return group.options.includes(item);
+                var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (_a) {
+                    var selectedItemKey = _a.key;
+                    return group.options.some(function (opt) { return opt.key === selectedItemKey; });
                 });
                 var handleSelectedItems = function (items) {
                     var _a;
-                    setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+                    setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (_a) {
+                        var selectedItemKey = _a.key;
+                        return !group.options.some(function (opt) { return opt.key === selectedItemKey; });
+                    })) !== null && _a !== void 0 ? _a : []).concat(items));
                 };
                 return (React__default.default.createElement(Optgroup, tslib.__assign({ label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }, groupOptionProps)));
             };

package/select/cssm/desktop/Component.desktop.js

@@ -8,7 +8,16 @@ var components_arrow_Component = require('../components/arrow/Component.js');
 var components_baseSelect_Component = require('../components/base-select/Component.js');
 var components_field_Component = require('../components/field/Component.js');
 var components_optgroup_Component = require('../components/optgroup/Component.js');
-var components_option_Component = require('../components/option/Component.js');
+require('classnames');
+require('../../../badge/cssm');
+require('../../../checkbox/cssm');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../components/checkmark/index.module.css');
+require('../components/option/desktop/index.module.css');
+require('../components/checkmark-mobile/index.module.css');
+require('../components/option/mobile/index.module.css');
+var components_option_Component_responsive = require('../components/option/Component.responsive.js');
 var components_optionsList_Component = require('../components/options-list/Component.js');
 var components_search_Component = require('../components/search/Component.js');
 
@@ -17,7 +26,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectDesktop = React.forwardRef(function (_a, ref) {
-    var _b = _a.Arrow, Arrow = _b === void 0 ? components_arrow_Component.Arrow : _b, _c = _a.Field, Field = _c === void 0 ? components_field_Component.Field : _c, _d = _a.OptionsList, OptionsList = _d === void 0 ? components_optionsList_Component.OptionsList : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, _f = _a.Option, Option = _f === void 0 ? components_option_Component.Option : _f, _g = _a.Search, Search = _g === void 0 ? components_search_Component.Search : _g, _h = _a.fieldProps, fieldProps = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option", "Search", "fieldProps"]);
+    var _b = _a.Arrow, Arrow = _b === void 0 ? components_arrow_Component.Arrow : _b, _c = _a.Field, Field = _c === void 0 ? components_field_Component.Field : _c, _d = _a.OptionsList, OptionsList = _d === void 0 ? components_optionsList_Component.OptionsList : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, _f = _a.Option, Option = _f === void 0 ? components_option_Component_responsive.OptionResponsive : _f, _g = _a.Search, Search = _g === void 0 ? components_search_Component.Search : _g, _h = _a.fieldProps, fieldProps = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option", "Search", "fieldProps"]);
     return (React__default.default.createElement(components_baseSelect_Component.BaseSelect, tslib.__assign({ ref: ref, view: 'desktop', Option: Option, Field: Field, fieldProps: tslib.__assign({ FormControlComponent: desktop.FormControlDesktop }, fieldProps), Search: Search, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, Popover: coreComponentsPopover.Popover }, restProps)));
 });
 

package/select/cssm/mobile/Component.mobile.js

@@ -10,7 +10,16 @@ var components_baseSelect_Component = require('../components/base-select/Compone
 var components_field_Component = require('../components/field/Component.js');
 var components_footer_Component = require('../components/footer/Component.js');
 var components_optgroup_Component = require('../components/optgroup/Component.js');
-var components_option_Component = require('../components/option/Component.js');
+require('classnames');
+require('../../../badge/cssm');
+require('../../../checkbox/cssm');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../components/checkmark/index.module.css');
+require('../components/option/desktop/index.module.css');
+require('../components/checkmark-mobile/index.module.css');
+require('../components/option/mobile/index.module.css');
+var components_option_Component_responsive = require('../components/option/Component.responsive.js');
 var components_optionsList_Component = require('../components/options-list/Component.js');
 var components_search_Component = require('../components/search/Component.js');
 var components_virtualOptionsList_Component = require('../components/virtual-options-list/Component.js');
@@ -23,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 var SelectMobile = React.forwardRef(function (_a, ref) {
-    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 56 : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 56 : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, _t = _a.Search, Search = _t === void 0 ? components_search_Component.Search : _t, selected = _a.selected, options = _a.options, _u = _a.OptionsList, OptionsList = _u === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+    var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 56 : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 56 : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.optionsListProps, optionsListProps = _o === void 0 ? {} : _o, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component_responsive.OptionResponsive : _s, _t = _a.Search, Search = _t === void 0 ? components_search_Component.Search : _t, selected = _a.selected, options = _a.options, _u = _a.OptionsList, OptionsList = _u === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
         ? components_virtualOptionsList_Component.VirtualOptionsList
         : components_optionsList_Component.OptionsList : _u, onChange = _a.onChange, _v = _a.showClear, showClear = _v === void 0 ? true : _v, showSelectAll = _a.showSelectAll, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _w = _a.useWithApplyHook, useWithApplyHook = _w === void 0 ? multiple : _w, showSearch = _a.showSearch, searchProps = _a.searchProps, restProps = tslib.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "Search", "selected", "options", "OptionsList", "onChange", "showClear", "showSelectAll", "showHeaderWithSelectAll", "useWithApplyHook", "showSearch", "searchProps"]);
     var applyProps = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply({

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

@@ -3,7 +3,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('../../../../skeleton/cssm');
-var components_option_Component = require('../../components/option/Component.js');
+require('classnames');
+require('../../../../badge/cssm');
+require('../../../../checkbox/cssm');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../../components/checkmark/index.module.css');
+require('../../components/option/desktop/index.module.css');
+require('../../components/checkmark-mobile/index.module.css');
+require('../../components/option/mobile/index.module.css');
+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 +48,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/cssm/presets/useSelectWithLoading/hook.js

@@ -3,7 +3,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSkeleton = require('../../../../skeleton/cssm');
-var components_option_Component = require('../../components/option/Component.js');
+require('classnames');
+require('../../../../badge/cssm');
+require('../../../../checkbox/cssm');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/CheckmarkMIcon');
+require('../../components/checkmark/index.module.css');
+require('../../components/option/desktop/index.module.css');
+require('../../components/checkmark-mobile/index.module.css');
+require('../../components/option/mobile/index.module.css');
+var components_option_Component_responsive = require('../../components/option/Component.responsive.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -12,7 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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/cssm/shared/index.js

@@ -4,7 +4,9 @@ var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
 var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-08576e87.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/cssm/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/desktop/Component.desktop.js

@@ -8,7 +8,12 @@ var components_arrow_Component = require('../components/arrow/Component.js');
 var components_baseSelect_Component = require('../components/base-select/Component.js');
 var components_field_Component = require('../components/field/Component.js');
 var components_optgroup_Component = require('../components/optgroup/Component.js');
-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');
 var components_optionsList_Component = require('../components/options-list/Component.js');
 var components_search_Component = require('../components/search/Component.js');
 
@@ -17,7 +22,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectDesktop = React.forwardRef(function (_a, ref) {
-    var _b = _a.Arrow, Arrow = _b === void 0 ? components_arrow_Component.Arrow : _b, _c = _a.Field, Field = _c === void 0 ? components_field_Component.Field : _c, _d = _a.OptionsList, OptionsList = _d === void 0 ? components_optionsList_Component.OptionsList : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, _f = _a.Option, Option = _f === void 0 ? components_option_Component.Option : _f, _g = _a.Search, Search = _g === void 0 ? components_search_Component.Search : _g, _h = _a.fieldProps, fieldProps = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option", "Search", "fieldProps"]);
+    var _b = _a.Arrow, Arrow = _b === void 0 ? components_arrow_Component.Arrow : _b, _c = _a.Field, Field = _c === void 0 ? components_field_Component.Field : _c, _d = _a.OptionsList, OptionsList = _d === void 0 ? components_optionsList_Component.OptionsList : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, _f = _a.Option, Option = _f === void 0 ? components_option_Component_responsive.OptionResponsive : _f, _g = _a.Search, Search = _g === void 0 ? components_search_Component.Search : _g, _h = _a.fieldProps, fieldProps = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option", "Search", "fieldProps"]);
     return (React__default.default.createElement(components_baseSelect_Component.BaseSelect, tslib.__assign({ ref: ref, view: 'desktop', Option: Option, Field: Field, fieldProps: tslib.__assign({ FormControlComponent: desktop.FormControlDesktop }, fieldProps), Search: Search, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, Popover: coreComponentsPopover.Popover }, restProps)));
 });