@alfalab/core-components-select 13.0.2 → 13.1.0

package/modern/components/base-select/index.css

@@ -1,4 +1,4 @@
-/* hash: xasym */
+/* hash: 1k69z */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -34,12 +34,12 @@
 
     /* optgroup */
 }
-.select__component_1et50 {
+.select__component_s9fig {
     width: max-content;
     position: relative;
     outline: 0;
 }
-.select__popoverInner_1et50 {
+.select__popoverInner_s9fig {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     box-shadow: none;
@@ -48,7 +48,7 @@
     border-radius: 0;
     position: relative;
 }
-.select__optionsList_1et50 {
+.select__optionsList_s9fig {
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
     box-shadow: var(--select-options-list-box-shadow);
@@ -57,7 +57,7 @@
     overflow: hidden;
     will-change: transform;
 }
-.select__nativeSelect_1et50 {
+.select__nativeSelect_s9fig {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -71,12 +71,12 @@
     cursor: pointer;
     z-index: 1;
 }
-.select__block_1et50 {
+.select__block_s9fig {
     width: 100%;
 }
 /* width: max-content; fix for IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_1et50 {
+    .select__component_s9fig {
         float: left;
         clear: left;
     }

package/modern/components/base-select/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-30d321bc";
+export * from "../../Component-6c794caf";

package/modern/components/base-select/index.js

@@ -5,6 +5,6 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
-export { B as BaseSelect } from '../../Component-30d321bc.js';
+export { B as BaseSelect } from '../../Component-6c794caf.js';
 import '../../utils.js';
 import '../native-select/Component.js';

package/modern/components/base-select-mobile/Component.js

@@ -7,12 +7,16 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
-import '../../Component-30d321bc.js';
+import '../../Component-6c794caf.js';
 import '../../utils.js';
 import '../native-select/Component.js';
 import '@alfalab/core-components-form-control/modern';
 import '../field/Component.js';
 import '../optgroup/Component.js';
+import '@alfalab/core-components/badge';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import './checkmark/Component.js';
 import '@alfalab/core-components-checkbox/modern';
 import '../checkmark/Component.js';
 import '../option/Component.js';
@@ -22,10 +26,11 @@ import '../../Component.js';
 import '@alfalab/core-components-bottom-sheet/modern';
 import '@alfalab/core-components-modal/modern/mobile';
 import '@alfalab/core-components-button/modern';
-export { B as BaseSelectMobile } from '../../Component-90abbd87.js';
-import './checkmark/Component.js';
+export { B as BaseSelectMobile } from '../../Component-b2369a4f.js';
+import '../base-checkmark/Component.js';
 import '@alfalab/core-components-base-modal/modern';
 import './options-list/Component.js';
 import 'react-virtual';
+import '../base-option/Component.js';
 import '@alfalab/core-components-skeleton/modern';
-import '../../intersection-observer-f1488f74.js';
+import '../../intersection-observer-75c9afe9.js';

package/modern/components/base-select-mobile/checkmark/Component.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
+import { Badge } from '@alfalab/core-components/badge';
+import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"checkmark":"select__checkmark_15hr6","selected":"select__selected_15hr6"};
+var styles = {"checkmark":"select__checkmark_13aoq","selected":"select__selected_13aoq","displayIcon":"select__displayIcon_13aoq","displayBadge":"select__displayBadge_13aoq"};
 require('./index.css')
 
-const Checkmark = ({ selected, className }) => (React.createElement("span", { className: cn(styles.checkmark, className, {
+const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {
         [styles.selected]: selected,
-    }) }));
+    }) },
+    React.createElement(CheckmarkMIcon, { className: styles.displayIcon }),
+    React.createElement(Badge, { className: styles.displayBadge, view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null) })));
 
 export { Checkmark };

package/modern/components/base-select-mobile/checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: 4rj0q */
+/* hash: rn014 */
 :root {
 
     /* Hard */
@@ -14,24 +14,29 @@
     /* option */
 
     /* checkmark */
-    --select-mobile-checkmark-background: url('https://alfabank.servicecdn.ru/icons/glyph_checkmark_m.svg');
+    --select-mobile-checkmark-display-icon: block;
+    --select-mobile-checkmark-display-badge: none;
 
     /* optgroup */
 }
-.select__checkmark_15hr6 {
+.select__checkmark_13aoq {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--select-mobile-checkmark-background);
-    background-size: cover;
     width: 24px;
     height: 24px;
     opacity: 0
 }
-.select__checkmark_15hr6:first-child {
+.select__checkmark_13aoq:first-child {
         display: none;
     }
-.select__checkmark_15hr6.select__selected_15hr6 {
+.select__checkmark_13aoq.select__selected_13aoq {
         opacity: 1;
     }
+.select__displayIcon_13aoq {
+    display: var(--select-mobile-checkmark-display-icon);
+}
+.select__displayBadge_13aoq {
+    display: var(--select-mobile-checkmark-display-badge);
+}

package/modern/components/base-select-mobile/checkmark/index.js

@@ -1,3 +1,6 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/badge';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
 export { Checkmark } from './Component.js';

package/modern/components/base-select-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: 1jn2v */
+/* hash: 7i77u */
 :root {
 
     /* Hard */
@@ -24,12 +24,12 @@
 
     /* optgroup */
 }
-.select__component_p7gkg {
+.select__component_uv809 {
     width: max-content;
     position: relative;
     outline: 0;
 }
-.select__popoverInner_p7gkg {
+.select__popoverInner_uv809 {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     box-shadow: none;
@@ -38,31 +38,31 @@
     border-radius: 0;
     position: relative;
 }
-.select__sheet_p7gkg {
+.select__sheet_uv809 {
     overflow: hidden;
 }
-.select__sheetContent_p7gkg {
+.select__sheetContent_uv809 {
     padding: 0;
 }
-.select__sheetContainer_p7gkg {
+.select__sheetContainer_uv809 {
     padding: 0;
 }
-.select__block_p7gkg {
+.select__block_uv809 {
     width: 100%;
 }
 /* width: max-content; fix for IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_p7gkg {
+    .select__component_uv809 {
         float: left;
         clear: left;
     }
 }
-.select__option_p7gkg {
+.select__option_uv809 {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
 }
-.select__option_p7gkg:before {
+.select__option_uv809:before {
         display: none;
     }
-.select__optionGroup_p7gkg {
+.select__optionGroup_uv809 {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }

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

@@ -1 +1 @@
-export * from "../../Component-90abbd87";
+export * from "../../Component-b2369a4f";

package/modern/components/base-select-mobile/index.js

@@ -7,12 +7,16 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
-import '../../Component-30d321bc.js';
+import '../../Component-6c794caf.js';
 import '../../utils.js';
 import '../native-select/Component.js';
 import '@alfalab/core-components-form-control/modern';
 import '../field/Component.js';
 import '../optgroup/Component.js';
+import '@alfalab/core-components/badge';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import './checkmark/Component.js';
 import '@alfalab/core-components-checkbox/modern';
 import '../checkmark/Component.js';
 import '../option/Component.js';
@@ -22,10 +26,11 @@ import '../../Component.js';
 import '@alfalab/core-components-bottom-sheet/modern';
 import '@alfalab/core-components-modal/modern/mobile';
 import '@alfalab/core-components-button/modern';
-export { B as BaseSelectMobile } from '../../Component-90abbd87.js';
-import './checkmark/Component.js';
+export { B as BaseSelectMobile } from '../../Component-b2369a4f.js';
+import '../base-checkmark/Component.js';
 import '@alfalab/core-components-base-modal/modern';
 import './options-list/Component.js';
 import 'react-virtual';
+import '../base-option/Component.js';
 import '@alfalab/core-components-skeleton/modern';
-import '../../intersection-observer-f1488f74.js';
+import '../../intersection-observer-75c9afe9.js';

package/modern/components/base-select-mobile/options-list/Component.js

@@ -5,7 +5,7 @@ import { Optgroup } from '../../optgroup/Component.js';
 import { Button } from '@alfalab/core-components-button/modern';
 import { BaseModalContext } from '@alfalab/core-components-base-modal/modern';
 
-var styles = {"optionsList":"select__optionsList_gz5t9","emptyPlaceholder":"select__emptyPlaceholder_gz5t9","l":"select__l_gz5t9","xl":"select__xl_gz5t9","footer":"select__footer_gz5t9","footerButton":"select__footerButton_gz5t9","highlighted":"select__highlighted_gz5t9"};
+var styles = {"optionsList":"select__optionsList_1hmhb","emptyPlaceholder":"select__emptyPlaceholder_1hmhb","l":"select__l_1hmhb","xl":"select__xl_1hmhb","footer":"select__footer_1hmhb","footerButton":"select__footerButton_1hmhb","highlighted":"select__highlighted_1hmhb"};
 require('./index.css')
 
 const createCounter = () => {

package/modern/components/base-select-mobile/options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 18qxf */
+/* hash: 10nls */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
@@ -32,20 +32,20 @@
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
     --select-mobile-footer-background-color: var(--color-light-bg-primary);
 }
-.select__optionsList_gz5t9 {
+.select__optionsList_1hmhb {
     width: 100%;
     outline: none;
     box-sizing: border-box;
 }
-.select__emptyPlaceholder_gz5t9 {
+.select__emptyPlaceholder_1hmhb {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__l_gz5t9 .select__emptyPlaceholder_gz5t9,
-.select__xl_gz5t9 .select__emptyPlaceholder_gz5t9 {
+.select__l_1hmhb .select__emptyPlaceholder_1hmhb,
+.select__xl_1hmhb .select__emptyPlaceholder_1hmhb {
     padding: var(--gap-xl) var(--gap-m);
 }
-.select__footer_gz5t9 {
+.select__footer_1hmhb {
     display: flex;
     justify-content: space-between;
     position: sticky;
@@ -53,13 +53,13 @@
     background-color: var(--color-light-bg-primary);
     bottom: 0
 }
-.select__footer_gz5t9 .select__footerButton_gz5t9:first-of-type {
+.select__footer_1hmhb .select__footerButton_1hmhb:first-of-type {
         margin-right: var(--gap-m);
     }
-.select__footerButton_gz5t9 {
+.select__footerButton_1hmhb {
     width: 50%;
 }
-.select__highlighted_gz5t9 {
+.select__highlighted_1hmhb {
     border-top: var(--select-mobile-footer-border-top);
     background-color: var(--select-mobile-footer-background-color);
 }

package/modern/components/checkmark/Component.js

@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
+import { Badge } from '@alfalab/core-components/badge';
+import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import { Checkbox } from '@alfalab/core-components-checkbox/modern';
 
-var styles = {"checkmark":"select__checkmark_bgl8g","single":"select__single_bgl8g","selected":"select__selected_bgl8g","before":"select__before_bgl8g","multiple":"select__multiple_bgl8g","after":"select__after_bgl8g"};
+var styles = {"checkmark":"select__checkmark_ax3cq","single":"select__single_ax3cq","selected":"select__selected_ax3cq","before":"select__before_ax3cq","multiple":"select__multiple_ax3cq","after":"select__after_ax3cq","colorIcon":"select__colorIcon_ax3cq"};
 require('./index.css')
 
 const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', }) => {
@@ -13,7 +15,8 @@ const Checkmark = ({ selected, disabled = false, className, multiple, position =
         [styles.selected]: selected,
     });
     const handleCheckboxClick = useCallback((event) => event.stopPropagation(), []);
-    return single ? (React.createElement("span", { className: checkmarkClassNames })) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 'm', onClick: handleCheckboxClick }));
+    return single ? (React.createElement("div", { className: checkmarkClassNames },
+        React.createElement(Badge, { className: styles.after, view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.colorIcon }) }))) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 'm', onClick: handleCheckboxClick }));
 };
 
 export { Checkmark };

package/modern/components/checkmark/index.css

@@ -1,5 +1,6 @@
-/* hash: 1gk4k */
+/* hash: 1ong8 */
 :root {
+    --color-light-graphic-positive: #2fc26e;
     --color-light-graphic-primary: #0b1f35;
 }
 :root {
@@ -35,11 +36,11 @@
 
     /* optgroup */
 }
-.select__checkmark_bgl8g {
+.select__checkmark_ax3cq {
     flex-shrink: 0;
     margin: var(--select-checkmark-margin);
 }
-.select__single_bgl8g {
+.select__single_ax3cq {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,15 +51,18 @@
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size)
 }
-.select__single_bgl8g.select__selected_bgl8g {
+.select__single_ax3cq.select__selected_ax3cq {
         opacity: 1;
     }
-.select__before_bgl8g {
+.select__before_ax3cq {
     display: var(--select-checkmark-before-display)
 }
-.select__before_bgl8g.select__multiple_bgl8g {
+.select__before_ax3cq.select__multiple_ax3cq {
         margin-right: var(--gap-s);
     }
-.select__after_bgl8g {
+.select__after_ax3cq {
     display: var(--select-checkmark-after-display);
 }
+.select__colorIcon_ax3cq {
+    color: var(--color-light-graphic-positive);
+}

package/modern/components/checkmark/index.js

@@ -1,4 +1,6 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/badge';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/core-components-checkbox/modern';
 export { Checkmark } from './Component.js';

package/modern/components/field/Component.js

@@ -4,7 +4,7 @@ import { useFocus } from '@alfalab/hooks';
 import { joinOptions } from '../../utils.js';
 import { FormControl } from '@alfalab/core-components-form-control/modern';
 
-var styles = {"component":"select__component_lx92g","field":"select__field_lx92g","disabled":"select__disabled_lx92g","arrow":"select__arrow_lx92g","placeholder":"select__placeholder_lx92g","contentWrapper":"select__contentWrapper_lx92g","value":"select__value_lx92g","focusVisible":"select__focusVisible_lx92g"};
+var styles = {"component":"select__component_1kb1m","field":"select__field_1kb1m","disabled":"select__disabled_1kb1m","arrow":"select__arrow_1kb1m","placeholder":"select__placeholder_1kb1m","contentWrapper":"select__contentWrapper_1kb1m","value":"select__value_1kb1m","focusVisible":"select__focusVisible_1kb1m"};
 require('./index.css')
 
 const Field = ({ size = 'm', open, multiple, error, hint, disabled, label, labelView = 'inner', placeholder, selectedMultiple = [], selected, rightAddons, valueRenderer = joinOptions, setSelectedItems, toggleMenu, Arrow, innerProps, dataTestId, fieldClassName, ...restProps }) => {

package/modern/components/field/index.css

@@ -1,4 +1,4 @@
-/* hash: cmwfz */
+/* hash: kq83p */
 :root {
     --color-light-border-link: #007aff;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -26,24 +26,24 @@
 
     /* optgroup */
 }
-.select__component_lx92g {
+.select__component_1kb1m {
     width: 100%;
     outline: none;
 }
-.select__field_lx92g:not(.select__disabled_lx92g) {
+.select__field_1kb1m:not(.select__disabled_1kb1m) {
     cursor: pointer
 }
-.select__field_lx92g:not(.select__disabled_lx92g):hover .select__arrow_lx92g {
+.select__field_1kb1m:not(.select__disabled_1kb1m):hover .select__arrow_1kb1m {
             opacity: var(--select-arrow-hover-opacity);
         }
-.select__disabled_lx92g {
+.select__disabled_1kb1m {
     cursor: var(--disabled-cursor);
 }
 /* TODO: Заюзать переменные из инпута */
-.select__placeholder_lx92g {
+.select__placeholder_1kb1m {
     color: var(--color-light-text-secondary);
 }
-.select__contentWrapper_lx92g {
+.select__contentWrapper_1kb1m {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -53,12 +53,12 @@
     overflow: hidden;
     width: 100%;
 }
-.select__value_lx92g {
+.select__value_1kb1m {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
-.select__focusVisible_lx92g {
+.select__focusVisible_1kb1m {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/components/index.d.ts

@@ -7,3 +7,4 @@ export * from "./optgroup/index";
 export * from "./option/index";
 export * from "./options-list/index";
 export * from "./virtual-options-list/index";
+export * from "./base-option/index";

package/modern/components/index.js

@@ -7,12 +7,16 @@ import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
-export { B as BaseSelect } from '../Component-30d321bc.js';
+export { B as BaseSelect } from '../Component-6c794caf.js';
 import '../utils.js';
 import './native-select/Component.js';
 import '@alfalab/core-components-form-control/modern';
 export { Field } from './field/Component.js';
 export { Optgroup } from './optgroup/Component.js';
+import '@alfalab/core-components/badge';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import './base-select-mobile/checkmark/Component.js';
 import '@alfalab/core-components-checkbox/modern';
 import './checkmark/Component.js';
 export { Option } from './option/Component.js';
@@ -22,11 +26,12 @@ import '../Component.js';
 import '@alfalab/core-components-bottom-sheet/modern';
 import '@alfalab/core-components-modal/modern/mobile';
 import '@alfalab/core-components-button/modern';
-export { S as SelectMobile, a as SelectModalMobile } from '../Component-90abbd87.js';
-import './base-select-mobile/checkmark/Component.js';
+export { S as SelectMobile, a as SelectModalMobile } from '../Component-b2369a4f.js';
+import './base-checkmark/Component.js';
 import '@alfalab/core-components-base-modal/modern';
 import './base-select-mobile/options-list/Component.js';
 import 'react-virtual';
 export { VirtualOptionsList } from './virtual-options-list/Component.js';
+export { BaseOption } from './base-option/Component.js';
 import '@alfalab/core-components-skeleton/modern';
-import '../intersection-observer-f1488f74.js';
+import '../intersection-observer-75c9afe9.js';

package/modern/components/optgroup/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"optgroup":"select__optgroup_ytwyr","label":"select__label_ytwyr","l":"select__l_ytwyr","xl":"select__xl_ytwyr"};
+var styles = {"optgroup":"select__optgroup_ca7ga","label":"select__label_ca7ga","l":"select__l_ca7ga","xl":"select__xl_ca7ga"};
 require('./index.css')
 
 const Optgroup = ({ children, className, label, size = 's' }) => (React.createElement(React.Fragment, null,

package/modern/components/optgroup/index.css

@@ -1,4 +1,4 @@
-/* hash: g9bn7 */
+/* hash: 134sn */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -12,7 +12,7 @@
     /* Hard up */
 }
 :root {
-    --gap-xs: 8px;
+    --gap-2xs: 4px;
     --gap-s: 12px;
     --gap-m: 16px;
 }
@@ -33,20 +33,20 @@
     --select-optgroup-l-left-padding: var(--gap-m);
     --select-optgroup-l-right-padding: var(--gap-m);
 }
-.select__optgroup_ytwyr {
+.select__optgroup_ca7ga {
     position: relative;
     display: flex;
     align-items: center;
-    padding: var(--gap-m) var(--select-optgroup-right-padding) var(--gap-xs)
+    padding: var(--gap-s) var(--select-optgroup-right-padding) var(--gap-2xs)
         var(--select-optgroup-left-padding);
     box-sizing: border-box;
     background: var(--select-optgroup-background);
     min-height: 40px
 }
-.select__optgroup_ytwyr + *[role='option']:before {
+.select__optgroup_ca7ga + *[role='option']:before {
         display: none;
     }
-.select__label_ytwyr {
+.select__label_ca7ga {
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
@@ -56,8 +56,8 @@
     display: block;
     color: var(--select-optgroup-color);
 }
-.select__l_ytwyr,
-.select__xl_ytwyr {
+.select__l_ca7ga,
+.select__xl_ca7ga {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/modern/components/option/Component.js

@@ -1,12 +1,16 @@
 import React, { isValidElement } from 'react';
 import cn from 'classnames';
+import '@alfalab/core-components/badge';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import { Checkmark } from '../base-select-mobile/checkmark/Component.js';
 import '@alfalab/core-components-checkbox/modern';
-import { Checkmark } from '../checkmark/Component.js';
+import { Checkmark as Checkmark$1 } from '../checkmark/Component.js';
 
-var styles = {"option":"select__option_14u7h","disabled":"select__disabled_14u7h","s":"select__s_14u7h","m":"select__m_14u7h","l":"select__l_14u7h","xl":"select__xl_14u7h","selected":"select__selected_14u7h","highlighted":"select__highlighted_14u7h","content":"select__content_14u7h","textContent":"select__textContent_14u7h"};
+var styles = {"option":"select__option_wfvq7","disabled":"select__disabled_wfvq7","s":"select__s_wfvq7","m":"select__m_wfvq7","l":"select__l_wfvq7","xl":"select__xl_wfvq7","selected":"select__selected_wfvq7","highlighted":"select__highlighted_wfvq7","content":"select__content_wfvq7","textContent":"select__textContent_wfvq7"};
 require('./index.css')
 
-const Option = ({ size = 's', className, option, children, selected, highlighted, disabled, multiple, Checkmark: Checkmark$1 = Checkmark, innerProps, dataTestId, }) => {
+const Option = ({ size = 's', className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark: Checkmark$2 = mobile ? Checkmark : Checkmark$1, innerProps, dataTestId, }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
     return (React.createElement("div", { ...innerProps, className: cn(styles.option, styles[size], className, {
@@ -14,11 +18,11 @@ const Option = ({ size = 's', className, option, children, selected, highlighted
             [styles.selected]: selected,
             [styles.disabled]: disabled,
         }), "data-test-id": dataTestId },
-        Checkmark$1 && showCheckMark && (React.createElement(Checkmark$1, { disabled: disabled, selected: selected, multiple: multiple, position: 'before' })),
+        Checkmark$2 && showCheckMark && (React.createElement(Checkmark$2, { disabled: disabled, selected: selected, multiple: multiple, position: 'before' })),
         React.createElement("div", { className: cn(styles.content, {
                 [styles.textContent]: !isValidElement(content),
             }) }, content),
-        Checkmark$1 && showCheckMark && (React.createElement(Checkmark$1, { disabled: disabled, selected: selected, multiple: multiple, position: 'after' }))));
+        Checkmark$2 && showCheckMark && (React.createElement(Checkmark$2, { disabled: disabled, selected: selected, multiple: multiple, position: 'after' }))));
 };
 
 export { Option };