@alfalab/core-components-select 18.2.6 → 18.2.8

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

@@ -6,9 +6,9 @@
         0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
         0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
 } :root {
-    --border-radius-m: 8px;
+    --border-radius-xl: 16px;
     --border-radius-0: 0;
-    --border-radius-8: var(--border-radius-m);
+    --border-radius-16: var(--border-radius-xl);
 } :root {
     --gap-2xs: 4px;
     --gap-s: 12px;
@@ -19,28 +19,28 @@
     --gap-16: var(--gap-m);
 } :root {
 
-    --select-options-list-border-radius: var(--border-radius-8);
+    --select-options-list-border-radius: var(--border-radius-16);
     --select-options-list-box-shadow: var(--shadow-m);
     --select-options-list-offset: var(--gap-4);
     --select-options-list-top-padding: var(--gap-0);
     --select-options-list-bottom-padding: var(--gap-0);
     --select-option-background: var(--color-light-modal-bg-primary);
-} .select__component_11l2p {
+} .select__component_1kpkq {
     width: -moz-max-content;
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_11l2p {
+} .select__popoverInner_1kpkq {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     background: transparent;
     border-radius: var(--border-radius-0);
     position: relative;
-} .select__popoverInner_11l2p.select__popoverInner_11l2p {
+} .select__popoverInner_1kpkq.select__popoverInner_1kpkq {
     box-shadow: none;
     border: none;
-} .select__optionsListWrapper_11l2p {
+} .select__optionsListWrapper_1kpkq {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
@@ -49,7 +49,7 @@
     background: var(--select-option-background);
     overflow: hidden;
     will-change: transform;
-} .select__optionsListBorder_11l2p {
+} .select__optionsListBorder_1kpkq {
     position: absolute;
     top: var(--gap-0);
     right: var(--gap-0);
@@ -58,7 +58,7 @@
     box-shadow: inset 0 0 0 1px var(--color-light-neutral-300);
     border-radius: inherit;
     pointer-events: none;
-} .select__nativeSelect_11l2p {
+} .select__nativeSelect_1kpkq {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -71,15 +71,15 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_11l2p {
+} .select__block_1kpkq {
     width: 100%;
-} .select__emptySearchPlaceholder_11l2p {
+} .select__emptySearchPlaceholder_1kpkq {
     text-align: center;
-} .select__search_11l2p {
+} .select__search_1kpkq {
     margin: var(--gap-12) var(--gap-12) var(--gap-0);
-} .select__search_11l2p.select__size-72_11l2p {
+} .select__search_1kpkq.select__size-72_1kpkq {
         margin-left: var(--gap-16);
         margin-right: var(--gap-16);
-    } .select__search_11l2p:last-child {
+    } .select__search_1kpkq:last-child {
         margin-bottom: var(--gap-12);
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"select__component_11l2p","popoverInner":"select__popoverInner_11l2p","optionsListWrapper":"select__optionsListWrapper_11l2p","optionsListBorder":"select__optionsListBorder_11l2p","nativeSelect":"select__nativeSelect_11l2p","block":"select__block_11l2p","emptySearchPlaceholder":"select__emptySearchPlaceholder_11l2p","search":"select__search_11l2p","size-72":"select__size-72_11l2p"};
+const styles = {"component":"select__component_1kpkq","popoverInner":"select__popoverInner_1kpkq","optionsListWrapper":"select__optionsListWrapper_1kpkq","optionsListBorder":"select__optionsListBorder_1kpkq","nativeSelect":"select__nativeSelect_1kpkq","block":"select__block_1kpkq","emptySearchPlaceholder":"select__emptySearchPlaceholder_1kpkq","search":"select__search_1kpkq","size-72":"select__size-72_1kpkq"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -8,30 +8,30 @@
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
     --gap-20: var(--gap-l);
-} .select__sheet_1r0s3 {
+} .select__sheet_s0sko {
     overflow: hidden;
-} .select__sheetContent_1r0s3.select__sheetContent_1r0s3 {
+} .select__sheetContent_s0sko.select__sheetContent_s0sko {
     padding: var(--gap-0);
-} .select__sheetContent_1r0s3.select__sheetContent_1r0s3 .select__modalContent_1r0s3 {
+} .select__sheetContent_s0sko.select__sheetContent_s0sko .select__modalContent_s0sko {
         padding: var(--gap-0);
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_1r0s3 {
+    } .select__sheetContainer_s0sko {
     padding: var(--gap-0);
-} .select__optionsListWrapper_1r0s3 {
+} .select__optionsListWrapper_s0sko {
     flex: 1;
-} .select__optionsList_1r0s3.select__optionsList_1r0s3 {
+} .select__optionsList_s0sko.select__optionsList_s0sko {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_1r0s3 {
+} .select__scrollbar_s0sko {
     flex: 1;
-} .select__search_1r0s3 {
+} .select__search_s0sko {
     padding: var(--gap-8);
-} .select__option_1r0s3.select__option_1r0s3 {
+} .select__option_s0sko.select__option_s0sko {
     padding: var(--gap-4) var(--gap-20) var(--gap-4) var(--gap-16);
-} .select__option_1r0s3.select__option_1r0s3:before {
+} .select__option_s0sko.select__option_s0sko:before {
         display: none;
-    } .select__optionGroup_1r0s3.select__optionGroup_1r0s3 {
+    } .select__optionGroup_s0sko.select__optionGroup_s0sko {
     padding: var(--gap-16) var(--gap-16) var(--gap-8);
 }

package/modern/components/base-select/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const mobileStyles = {"sheet":"select__sheet_1r0s3","sheetContent":"select__sheetContent_1r0s3","modalContent":"select__modalContent_1r0s3","sheetContainer":"select__sheetContainer_1r0s3","optionsListWrapper":"select__optionsListWrapper_1r0s3","optionsList":"select__optionsList_1r0s3","scrollbar":"select__scrollbar_1r0s3","search":"select__search_1r0s3","option":"select__option_1r0s3","optionGroup":"select__optionGroup_1r0s3"};
+const mobileStyles = {"sheet":"select__sheet_s0sko","sheetContent":"select__sheetContent_s0sko","modalContent":"select__modalContent_s0sko","sheetContainer":"select__sheetContainer_s0sko","optionsListWrapper":"select__optionsListWrapper_s0sko","optionsList":"select__optionsList_s0sko","scrollbar":"select__scrollbar_s0sko","search":"select__search_s0sko","option":"select__option_s0sko","optionGroup":"select__optionGroup_s0sko"};
 
 export { mobileStyles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/components/checkmark/index.css

@@ -21,12 +21,12 @@
     --select-checkmark-unselected-opacity: 0;
     --select-checkmark-background: var(--color-light-neutral-translucent-1300);
     --select-checkmark-border-radius: var(--border-radius-circle);
-} .select__checkmark_1k3g7 {
+} .select__checkmark_wi634 {
     flex-shrink: 0;
     margin: var(--select-checkmark-margin);
-} .select__checkmark_1k3g7.select__after_1k3g7 {
+} .select__checkmark_wi634.select__after_wi634 {
         margin: var(--select-checkmark-margin-after);
-    } .select__single_1k3g7 {
+    } .select__single_wi634 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -36,17 +36,17 @@
     border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size);
-} .select__single_1k3g7.select__selected_1k3g7 {
+} .select__single_wi634.select__selected_wi634 {
         opacity: 1;
-    } .select__before_1k3g7 {
+    } .select__before_wi634 {
     display: var(--select-checkmark-before-display);
-} .select__before_1k3g7.select__multiple_1k3g7 {
+} .select__before_wi634.select__multiple_wi634 {
         margin-right: var(--gap-12);
         display: var(--select-checkmark-before-display-multiple);
-    } .select__after_1k3g7.select__after_1k3g7 {
+    } .select__after_wi634.select__after_wi634 {
     display: var(--select-checkmark-after-display);
-} .select__after_1k3g7.select__after_1k3g7.select__single_1k3g7 {
+} .select__after_wi634.select__after_wi634.select__single_wi634 {
         display: var(--select-checkmark-after-display-single);
-    } .select__colorIcon_1k3g7 {
+    } .select__colorIcon_wi634 {
     color: var(--color-light-status-positive);
 }

package/modern/components/checkmark/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"checkmark":"select__checkmark_1k3g7","after":"select__after_1k3g7","single":"select__single_1k3g7","selected":"select__selected_1k3g7","before":"select__before_1k3g7","multiple":"select__multiple_1k3g7","colorIcon":"select__colorIcon_1k3g7"};
+const styles = {"checkmark":"select__checkmark_wi634","after":"select__after_wi634","single":"select__single_wi634","selected":"select__selected_wi634","before":"select__before_wi634","multiple":"select__multiple_wi634","colorIcon":"select__colorIcon_wi634"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1,7 +1,7 @@
 :root {
     --select-mobile-checkmark-display-icon: block;
     --select-mobile-checkmark-display-badge: none;
-} .select__checkmark_g4bgj {
+} .select__checkmark_l6nb6 {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -9,12 +9,12 @@
     width: 24px;
     height: 24px;
     opacity: 0;
-} .select__checkmark_g4bgj:first-child {
+} .select__checkmark_l6nb6:first-child {
         display: none;
-    } .select__checkmark_g4bgj.select__selected_g4bgj {
+    } .select__checkmark_l6nb6.select__selected_l6nb6 {
         opacity: 1;
-    } .select__displayIcon_g4bgj {
+    } .select__displayIcon_l6nb6 {
     display: var(--select-mobile-checkmark-display-icon);
-} .select__displayBadge_g4bgj {
+} .select__displayBadge_l6nb6 {
     display: var(--select-mobile-checkmark-display-badge);
 }

package/modern/components/checkmark-mobile/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"checkmark":"select__checkmark_g4bgj","selected":"select__selected_g4bgj","displayIcon":"select__displayIcon_g4bgj"};
+const styles = {"checkmark":"select__checkmark_l6nb6","selected":"select__selected_l6nb6","displayIcon":"select__displayIcon_l6nb6"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/clear-button/index.css

@@ -4,13 +4,13 @@
     --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47);
 } :root {
     --input-error-icon-display: none;
-} .select__clearIcon_15ggj {
+} .select__clearIcon_hv6fe {
     display: block;
     color: var(--color-light-neutral-translucent-500);
-} .select__clearIcon_15ggj:hover {
+} .select__clearIcon_hv6fe:hover {
         color: var(--color-light-neutral-translucent-500-hover);
-    } .select__clearIcon_15ggj:active {
+    } .select__clearIcon_hv6fe:active {
         color: var(--color-light-neutral-translucent-500-press);
-    } .select__clearButton_15ggj + [data-addon='error-icon'] {
+    } .select__clearButton_hv6fe + [data-addon='error-icon'] {
     display: var(--input-error-icon-display);
 }

package/modern/components/clear-button/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"clearIcon":"select__clearIcon_15ggj","clearButton":"select__clearButton_15ggj"};
+const styles = {"clearIcon":"select__clearIcon_hv6fe","clearButton":"select__clearButton_hv6fe"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/field/index.css

@@ -10,22 +10,22 @@
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
 } :root {
     --select-arrow-hover-opacity: 0.7;
-} .select__component_bk046 {
+} .select__component_1mzu1 {
     width: 100%;
     outline: none;
-} .select__field_bk046:not(.select__disabled_bk046) {
+} .select__field_1mzu1:not(.select__disabled_1mzu1) {
     cursor: pointer;
-} .select__field_bk046:not(.select__disabled_bk046):hover .select__arrow_bk046 {
+} .select__field_1mzu1:not(.select__disabled_1mzu1):hover .select__arrow_1mzu1 {
             opacity: var(--select-arrow-hover-opacity);
-        } .select__disabled_bk046 {
+        } .select__disabled_1mzu1 {
     cursor: var(--disabled-cursor);
-} .select__placeholder_bk046 {
+} .select__placeholder_1mzu1 {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_bk046 0.2s ease;
-} .select__placeholder_bk046.select__focused_bk046 {
+    animation: select__show-placeholder_1mzu1 0.2s ease;
+} .select__placeholder_1mzu1.select__focused_1mzu1 {
         color: var(--input-focus-placeholder-color);
-    } .select__contentWrapper_bk046 {
+    } .select__contentWrapper_1mzu1 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -34,22 +34,22 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .select__contentWrapper_bk046.select__size-40_bk046 {
+} .select__contentWrapper_1mzu1.select__size-40_1mzu1 {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__value_bk046 {
+    } .select__value_1mzu1 {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .select__value_bk046.select__size-40_bk046 {
+} .select__value_1mzu1.select__size-40_1mzu1 {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__focusVisible_bk046 {
+    } .select__focusVisible_1mzu1 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} @keyframes select__show-placeholder_bk046 {
+} @keyframes select__show-placeholder_1mzu1 {
     from {
         opacity: 0;
     }

package/modern/components/field/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"select__component_bk046","field":"select__field_bk046","disabled":"select__disabled_bk046","arrow":"select__arrow_bk046","placeholder":"select__placeholder_bk046","show-placeholder":"select__show-placeholder_bk046","focused":"select__focused_bk046","contentWrapper":"select__contentWrapper_bk046","size-40":"select__size-40_bk046","value":"select__value_bk046","focusVisible":"select__focusVisible_bk046"};
+const styles = {"component":"select__component_1mzu1","field":"select__field_1mzu1","disabled":"select__disabled_1mzu1","arrow":"select__arrow_1mzu1","placeholder":"select__placeholder_1mzu1","show-placeholder":"select__show-placeholder_1mzu1","focused":"select__focused_1mzu1","contentWrapper":"select__contentWrapper_1mzu1","size-40":"select__size-40_1mzu1","value":"select__value_1mzu1","focusVisible":"select__focusVisible_1mzu1"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/footer/index.css

@@ -4,17 +4,17 @@
 } :root {
     --gap-m: 16px;
     --gap-16: var(--gap-m);
-} .select__footer_16eho {
+} .select__footer_j2mfs {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     padding: var(--gap-16) var(--gap-16);
     background-color: var(--color-light-modal-bg-primary);
-} .select__footer_16eho .select__button_16eho:first-of-type {
+} .select__footer_j2mfs .select__button_j2mfs:first-of-type {
         margin-right: var(--gap-16);
-    } .select__button_16eho {
+    } .select__button_j2mfs {
     width: 50%;
-} .select__highlighted_16eho {
+} .select__highlighted_j2mfs {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

package/modern/components/footer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"select__footer_16eho","button":"select__button_16eho","highlighted":"select__highlighted_16eho"};
+const styles = {"footer":"select__footer_j2mfs","button":"select__button_j2mfs","highlighted":"select__highlighted_j2mfs"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/optgroup/index.css

@@ -16,7 +16,7 @@
     --select-optgroup-right-padding: var(--gap-12);
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
-} .select__optgroup_7v3if {
+} .select__optgroup_1jkcb {
     position: relative;
     display: flex;
     align-items: center;
@@ -25,9 +25,9 @@
     box-sizing: border-box;
     background: var(--select-optgroup-background);
     min-height: 40px;
-} .select__optgroup_7v3if + *[role='option']:before {
+} .select__optgroup_1jkcb + *[role='option']:before {
         display: none;
-    } .select__label_7v3if {
+    } .select__label_1jkcb {
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
@@ -36,7 +36,7 @@
 
     display: block;
     color: var(--select-optgroup-color);
-} .select__size-72_7v3if {
+} .select__size-72_1jkcb {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/modern/components/optgroup/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"optgroup":"select__optgroup_7v3if","label":"select__label_7v3if","size-72":"select__size-72_7v3if"};
+const styles = {"optgroup":"select__optgroup_1jkcb","label":"select__label_1jkcb","size-72":"select__size-72_1jkcb"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/option/desktop/index.css

@@ -35,7 +35,7 @@
     --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);
-} .select__option_1hxpg {
+} .select__option_1n01b {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,10 +50,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
-} .select__option_1hxpg:not(.select__disabled_1hxpg):active {
+} .select__option_1n01b:not(.select__disabled_1n01b):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_1hxpg:before {
+    } .select__option_1n01b:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -63,46 +63,46 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_1hxpg:first-child:before {
+    } .select__option_1n01b:first-child:before {
         display: none;
-    } .select__size-48_1hxpg {
+    } .select__size-48_1n01b {
     min-height: var(--size-s-height);
-} .select__size-56_1hxpg {
+} .select__size-56_1n01b {
     min-height: var(--size-m-height);
-} .select__size-64_1hxpg {
+} .select__size-64_1n01b {
     min-height: var(--size-l-height);
-} .select__size-72_1hxpg {
+} .select__size-72_1n01b {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
-} .select__size-72_1hxpg:before {
+} .select__size-72_1n01b:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_1hxpg {
+    } .select__selected_1n01b {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_1hxpg {
+} .select__highlighted_1n01b {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_1hxpg:before,
-    .select__highlighted_1hxpg + .select__option_1hxpg:before {
+} .select__highlighted_1n01b:before,
+    .select__highlighted_1n01b + .select__option_1n01b:before {
         opacity: 0;
-    } .select__disabled_1hxpg {
+    } .select__disabled_1n01b {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_1hxpg {
+} .select__content_1n01b {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_1hxpg {
+} .select__textContent_1n01b {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
-} .select__highlighted_1hxpg {
+} .select__highlighted_1n01b {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_1hxpg:before,
-    .select__highlighted_1hxpg + .select__option_1hxpg:before {
+} .select__highlighted_1n01b:before,
+    .select__highlighted_1n01b + .select__option_1n01b:before {
         opacity: 0;
     }

package/modern/components/option/desktop/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"option":"select__option_1hxpg","disabled":"select__disabled_1hxpg","size-48":"select__size-48_1hxpg","size-56":"select__size-56_1hxpg","size-64":"select__size-64_1hxpg","size-72":"select__size-72_1hxpg","selected":"select__selected_1hxpg","highlighted":"select__highlighted_1hxpg","content":"select__content_1hxpg","textContent":"select__textContent_1hxpg"};
+const styles = {"option":"select__option_1n01b","disabled":"select__disabled_1n01b","size-48":"select__size-48_1n01b","size-56":"select__size-56_1n01b","size-64":"select__size-64_1n01b","size-72":"select__size-72_1n01b","selected":"select__selected_1n01b","highlighted":"select__highlighted_1n01b","content":"select__content_1n01b","textContent":"select__textContent_1n01b"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/option/mobile/index.css

@@ -35,7 +35,7 @@
     --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);
-} .select__option_1ipxd {
+} .select__option_79c26 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,10 +50,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
-} .select__option_1ipxd:not(.select__disabled_1ipxd):active {
+} .select__option_79c26:not(.select__disabled_79c26):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_1ipxd:before {
+    } .select__option_79c26:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -63,40 +63,40 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_1ipxd:first-child:before {
+    } .select__option_79c26:first-child:before {
         display: none;
-    } .select__size-48_1ipxd {
+    } .select__size-48_79c26 {
     min-height: var(--size-s-height);
-} .select__size-56_1ipxd {
+} .select__size-56_79c26 {
     min-height: var(--size-m-height);
-} .select__size-64_1ipxd {
+} .select__size-64_79c26 {
     min-height: var(--size-l-height);
-} .select__size-72_1ipxd {
+} .select__size-72_79c26 {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
-} .select__size-72_1ipxd:before {
+} .select__size-72_79c26:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_1ipxd {
+    } .select__selected_79c26 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_1ipxd {
+} .select__highlighted_79c26 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_1ipxd:before,
-    .select__highlighted_1ipxd + .select__option_1ipxd:before {
+} .select__highlighted_79c26:before,
+    .select__highlighted_79c26 + .select__option_79c26:before {
         opacity: 0;
-    } .select__disabled_1ipxd {
+    } .select__disabled_79c26 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_1ipxd {
+} .select__content_79c26 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_1ipxd {
+} .select__textContent_79c26 {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }

package/modern/components/option/mobile/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"option":"select__option_1ipxd","disabled":"select__disabled_1ipxd","size-48":"select__size-48_1ipxd","size-56":"select__size-56_1ipxd","size-64":"select__size-64_1ipxd","size-72":"select__size-72_1ipxd","selected":"select__selected_1ipxd","highlighted":"select__highlighted_1ipxd","content":"select__content_1ipxd","textContent":"select__textContent_1ipxd"};
+const styles = {"option":"select__option_79c26","disabled":"select__disabled_79c26","size-48":"select__size-48_79c26","size-56":"select__size-56_79c26","size-64":"select__size-64_79c26","size-72":"select__size-72_79c26","selected":"select__selected_79c26","highlighted":"select__highlighted_79c26","content":"select__content_79c26","textContent":"select__textContent_79c26"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -69,7 +69,10 @@ const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, fo
             'data-test-id': dataTestId,
             ref: ref,
         };
-        return (React.createElement(Scrollbar, { className: cn(styles.scrollable, scrollbarClassName), ref: scrollbarRef, style: { height }, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef }, maskProps: {
+        return (React.createElement(Scrollbar, { className: cn(styles.scrollable, scrollbarClassName), verticalBarClassName: cn(styles.verticalBar, {
+                [styles.verticalBarWithHeader]: Boolean(header),
+                [styles.verticalBarWithFooter]: Boolean(footer),
+            }), ref: scrollbarRef, style: { height }, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef }, maskProps: {
                 /*
                  * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'
                  * высота опции всегда будет равна высоте одной строчки)