@alfalab/core-components-select 18.2.7 → 18.2.9

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_1kxj2 {
+} .select__component_kx5xb {
     width: -moz-max-content;
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_1kxj2 {
+} .select__popoverInner_kx5xb {
     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_1kxj2.select__popoverInner_1kxj2 {
+} .select__popoverInner_kx5xb.select__popoverInner_kx5xb {
     box-shadow: none;
     border: none;
-} .select__optionsListWrapper_1kxj2 {
+} .select__optionsListWrapper_kx5xb {
     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_1kxj2 {
+} .select__optionsListBorder_kx5xb {
     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_1kxj2 {
+} .select__nativeSelect_kx5xb {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -71,15 +71,15 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_1kxj2 {
+} .select__block_kx5xb {
     width: 100%;
-} .select__emptySearchPlaceholder_1kxj2 {
+} .select__emptySearchPlaceholder_kx5xb {
     text-align: center;
-} .select__search_1kxj2 {
+} .select__search_kx5xb {
     margin: var(--gap-12) var(--gap-12) var(--gap-0);
-} .select__search_1kxj2.select__size-72_1kxj2 {
+} .select__search_kx5xb.select__size-72_kx5xb {
         margin-left: var(--gap-16);
         margin-right: var(--gap-16);
-    } .select__search_1kxj2:last-child {
+    } .select__search_kx5xb: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_1kxj2","popoverInner":"select__popoverInner_1kxj2","optionsListWrapper":"select__optionsListWrapper_1kxj2","optionsListBorder":"select__optionsListBorder_1kxj2","nativeSelect":"select__nativeSelect_1kxj2","block":"select__block_1kxj2","emptySearchPlaceholder":"select__emptySearchPlaceholder_1kxj2","search":"select__search_1kxj2","size-72":"select__size-72_1kxj2"};
+const styles = {"component":"select__component_kx5xb","popoverInner":"select__popoverInner_kx5xb","optionsListWrapper":"select__optionsListWrapper_kx5xb","optionsListBorder":"select__optionsListBorder_kx5xb","nativeSelect":"select__nativeSelect_kx5xb","block":"select__block_kx5xb","emptySearchPlaceholder":"select__emptySearchPlaceholder_kx5xb","search":"select__search_kx5xb","size-72":"select__size-72_kx5xb"};
 
 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_upd3m {
+} .select__sheet_zqxkd {
     overflow: hidden;
-} .select__sheetContent_upd3m.select__sheetContent_upd3m {
+} .select__sheetContent_zqxkd.select__sheetContent_zqxkd {
     padding: var(--gap-0);
-} .select__sheetContent_upd3m.select__sheetContent_upd3m .select__modalContent_upd3m {
+} .select__sheetContent_zqxkd.select__sheetContent_zqxkd .select__modalContent_zqxkd {
         padding: var(--gap-0);
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_upd3m {
+    } .select__sheetContainer_zqxkd {
     padding: var(--gap-0);
-} .select__optionsListWrapper_upd3m {
+} .select__optionsListWrapper_zqxkd {
     flex: 1;
-} .select__optionsList_upd3m.select__optionsList_upd3m {
+} .select__optionsList_zqxkd.select__optionsList_zqxkd {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_upd3m {
+} .select__scrollbar_zqxkd {
     flex: 1;
-} .select__search_upd3m {
+} .select__search_zqxkd {
     padding: var(--gap-8);
-} .select__option_upd3m.select__option_upd3m {
+} .select__option_zqxkd.select__option_zqxkd {
     padding: var(--gap-4) var(--gap-20) var(--gap-4) var(--gap-16);
-} .select__option_upd3m.select__option_upd3m:before {
+} .select__option_zqxkd.select__option_zqxkd:before {
         display: none;
-    } .select__optionGroup_upd3m.select__optionGroup_upd3m {
+    } .select__optionGroup_zqxkd.select__optionGroup_zqxkd {
     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_upd3m","sheetContent":"select__sheetContent_upd3m","modalContent":"select__modalContent_upd3m","sheetContainer":"select__sheetContainer_upd3m","optionsListWrapper":"select__optionsListWrapper_upd3m","optionsList":"select__optionsList_upd3m","scrollbar":"select__scrollbar_upd3m","search":"select__search_upd3m","option":"select__option_upd3m","optionGroup":"select__optionGroup_upd3m"};
+const mobileStyles = {"sheet":"select__sheet_zqxkd","sheetContent":"select__sheetContent_zqxkd","modalContent":"select__modalContent_zqxkd","sheetContainer":"select__sheetContainer_zqxkd","optionsListWrapper":"select__optionsListWrapper_zqxkd","optionsList":"select__optionsList_zqxkd","scrollbar":"select__scrollbar_zqxkd","search":"select__search_zqxkd","option":"select__option_zqxkd","optionGroup":"select__optionGroup_zqxkd"};
 
 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_hdr5y {
+} .select__checkmark_os13f {
     flex-shrink: 0;
     margin: var(--select-checkmark-margin);
-} .select__checkmark_hdr5y.select__after_hdr5y {
+} .select__checkmark_os13f.select__after_os13f {
         margin: var(--select-checkmark-margin-after);
-    } .select__single_hdr5y {
+    } .select__single_os13f {
     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_hdr5y.select__selected_hdr5y {
+} .select__single_os13f.select__selected_os13f {
         opacity: 1;
-    } .select__before_hdr5y {
+    } .select__before_os13f {
     display: var(--select-checkmark-before-display);
-} .select__before_hdr5y.select__multiple_hdr5y {
+} .select__before_os13f.select__multiple_os13f {
         margin-right: var(--gap-12);
         display: var(--select-checkmark-before-display-multiple);
-    } .select__after_hdr5y.select__after_hdr5y {
+    } .select__after_os13f.select__after_os13f {
     display: var(--select-checkmark-after-display);
-} .select__after_hdr5y.select__after_hdr5y.select__single_hdr5y {
+} .select__after_os13f.select__after_os13f.select__single_os13f {
         display: var(--select-checkmark-after-display-single);
-    } .select__colorIcon_hdr5y {
+    } .select__colorIcon_os13f {
     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_hdr5y","after":"select__after_hdr5y","single":"select__single_hdr5y","selected":"select__selected_hdr5y","before":"select__before_hdr5y","multiple":"select__multiple_hdr5y","colorIcon":"select__colorIcon_hdr5y"};
+const styles = {"checkmark":"select__checkmark_os13f","after":"select__after_os13f","single":"select__single_os13f","selected":"select__selected_os13f","before":"select__before_os13f","multiple":"select__multiple_os13f","colorIcon":"select__colorIcon_os13f"};
 
 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_1hy6t {
+} .select__checkmark_1n0in {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -9,12 +9,12 @@
     width: 24px;
     height: 24px;
     opacity: 0;
-} .select__checkmark_1hy6t:first-child {
+} .select__checkmark_1n0in:first-child {
         display: none;
-    } .select__checkmark_1hy6t.select__selected_1hy6t {
+    } .select__checkmark_1n0in.select__selected_1n0in {
         opacity: 1;
-    } .select__displayIcon_1hy6t {
+    } .select__displayIcon_1n0in {
     display: var(--select-mobile-checkmark-display-icon);
-} .select__displayBadge_1hy6t {
+} .select__displayBadge_1n0in {
     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_1hy6t","selected":"select__selected_1hy6t","displayIcon":"select__displayIcon_1hy6t"};
+const styles = {"checkmark":"select__checkmark_1n0in","selected":"select__selected_1n0in","displayIcon":"select__displayIcon_1n0in"};
 
 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_up6ji {
+} .select__clearIcon_123gh {
     display: block;
     color: var(--color-light-neutral-translucent-500);
-} .select__clearIcon_up6ji:hover {
+} .select__clearIcon_123gh:hover {
         color: var(--color-light-neutral-translucent-500-hover);
-    } .select__clearIcon_up6ji:active {
+    } .select__clearIcon_123gh:active {
         color: var(--color-light-neutral-translucent-500-press);
-    } .select__clearButton_up6ji + [data-addon='error-icon'] {
+    } .select__clearButton_123gh + [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_up6ji","clearButton":"select__clearButton_up6ji"};
+const styles = {"clearIcon":"select__clearIcon_123gh","clearButton":"select__clearButton_123gh"};
 
 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_sq3tk {
+} .select__component_8701a {
     width: 100%;
     outline: none;
-} .select__field_sq3tk:not(.select__disabled_sq3tk) {
+} .select__field_8701a:not(.select__disabled_8701a) {
     cursor: pointer;
-} .select__field_sq3tk:not(.select__disabled_sq3tk):hover .select__arrow_sq3tk {
+} .select__field_8701a:not(.select__disabled_8701a):hover .select__arrow_8701a {
             opacity: var(--select-arrow-hover-opacity);
-        } .select__disabled_sq3tk {
+        } .select__disabled_8701a {
     cursor: var(--disabled-cursor);
-} .select__placeholder_sq3tk {
+} .select__placeholder_8701a {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_sq3tk 0.2s ease;
-} .select__placeholder_sq3tk.select__focused_sq3tk {
+    animation: select__show-placeholder_8701a 0.2s ease;
+} .select__placeholder_8701a.select__focused_8701a {
         color: var(--input-focus-placeholder-color);
-    } .select__contentWrapper_sq3tk {
+    } .select__contentWrapper_8701a {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -34,22 +34,22 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .select__contentWrapper_sq3tk.select__size-40_sq3tk {
+} .select__contentWrapper_8701a.select__size-40_8701a {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__value_sq3tk {
+    } .select__value_8701a {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .select__value_sq3tk.select__size-40_sq3tk {
+} .select__value_8701a.select__size-40_8701a {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__focusVisible_sq3tk {
+    } .select__focusVisible_8701a {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} @keyframes select__show-placeholder_sq3tk {
+} @keyframes select__show-placeholder_8701a {
     from {
         opacity: 0;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"select__component_sq3tk","field":"select__field_sq3tk","disabled":"select__disabled_sq3tk","arrow":"select__arrow_sq3tk","placeholder":"select__placeholder_sq3tk","show-placeholder":"select__show-placeholder_sq3tk","focused":"select__focused_sq3tk","contentWrapper":"select__contentWrapper_sq3tk","size-40":"select__size-40_sq3tk","value":"select__value_sq3tk","focusVisible":"select__focusVisible_sq3tk"};
+const styles = {"component":"select__component_8701a","field":"select__field_8701a","disabled":"select__disabled_8701a","arrow":"select__arrow_8701a","placeholder":"select__placeholder_8701a","show-placeholder":"select__show-placeholder_8701a","focused":"select__focused_8701a","contentWrapper":"select__contentWrapper_8701a","size-40":"select__size-40_8701a","value":"select__value_8701a","focusVisible":"select__focusVisible_8701a"};
 
 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_n21cb {
+} .select__footer_1yra5 {
     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_n21cb .select__button_n21cb:first-of-type {
+} .select__footer_1yra5 .select__button_1yra5:first-of-type {
         margin-right: var(--gap-16);
-    } .select__button_n21cb {
+    } .select__button_1yra5 {
     width: 50%;
-} .select__highlighted_n21cb {
+} .select__highlighted_1yra5 {
     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_n21cb","button":"select__button_n21cb","highlighted":"select__highlighted_n21cb"};
+const styles = {"footer":"select__footer_1yra5","button":"select__button_1yra5","highlighted":"select__highlighted_1yra5"};
 
 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_r7juz {
+} .select__optgroup_3volw {
     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_r7juz + *[role='option']:before {
+} .select__optgroup_3volw + *[role='option']:before {
         display: none;
-    } .select__label_r7juz {
+    } .select__label_3volw {
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
@@ -36,7 +36,7 @@
 
     display: block;
     color: var(--select-optgroup-color);
-} .select__size-72_r7juz {
+} .select__size-72_3volw {
     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_r7juz","label":"select__label_r7juz","size-72":"select__size-72_r7juz"};
+const styles = {"optgroup":"select__optgroup_3volw","label":"select__label_3volw","size-72":"select__size-72_3volw"};
 
 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_kqgr6 {
+} .select__option_psslt {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,10 +50,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
-} .select__option_kqgr6:not(.select__disabled_kqgr6):active {
+} .select__option_psslt:not(.select__disabled_psslt):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_kqgr6:before {
+    } .select__option_psslt: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_kqgr6:first-child:before {
+    } .select__option_psslt:first-child:before {
         display: none;
-    } .select__size-48_kqgr6 {
+    } .select__size-48_psslt {
     min-height: var(--size-s-height);
-} .select__size-56_kqgr6 {
+} .select__size-56_psslt {
     min-height: var(--size-m-height);
-} .select__size-64_kqgr6 {
+} .select__size-64_psslt {
     min-height: var(--size-l-height);
-} .select__size-72_kqgr6 {
+} .select__size-72_psslt {
     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_kqgr6:before {
+} .select__size-72_psslt:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_kqgr6 {
+    } .select__selected_psslt {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_kqgr6 {
+} .select__highlighted_psslt {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_kqgr6:before,
-    .select__highlighted_kqgr6 + .select__option_kqgr6:before {
+} .select__highlighted_psslt:before,
+    .select__highlighted_psslt + .select__option_psslt:before {
         opacity: 0;
-    } .select__disabled_kqgr6 {
+    } .select__disabled_psslt {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_kqgr6 {
+} .select__content_psslt {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_kqgr6 {
+} .select__textContent_psslt {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
-} .select__highlighted_kqgr6 {
+} .select__highlighted_psslt {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_kqgr6:before,
-    .select__highlighted_kqgr6 + .select__option_kqgr6:before {
+} .select__highlighted_psslt:before,
+    .select__highlighted_psslt + .select__option_psslt:before {
         opacity: 0;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"option":"select__option_kqgr6","disabled":"select__disabled_kqgr6","size-48":"select__size-48_kqgr6","size-56":"select__size-56_kqgr6","size-64":"select__size-64_kqgr6","size-72":"select__size-72_kqgr6","selected":"select__selected_kqgr6","highlighted":"select__highlighted_kqgr6","content":"select__content_kqgr6","textContent":"select__textContent_kqgr6"};
+const styles = {"option":"select__option_psslt","disabled":"select__disabled_psslt","size-48":"select__size-48_psslt","size-56":"select__size-56_psslt","size-64":"select__size-64_psslt","size-72":"select__size-72_psslt","selected":"select__selected_psslt","highlighted":"select__highlighted_psslt","content":"select__content_psslt","textContent":"select__textContent_psslt"};
 
 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_lioo6 {
+} .select__option_1937e {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,10 +50,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
-} .select__option_lioo6:not(.select__disabled_lioo6):active {
+} .select__option_1937e:not(.select__disabled_1937e):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_lioo6:before {
+    } .select__option_1937e: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_lioo6:first-child:before {
+    } .select__option_1937e:first-child:before {
         display: none;
-    } .select__size-48_lioo6 {
+    } .select__size-48_1937e {
     min-height: var(--size-s-height);
-} .select__size-56_lioo6 {
+} .select__size-56_1937e {
     min-height: var(--size-m-height);
-} .select__size-64_lioo6 {
+} .select__size-64_1937e {
     min-height: var(--size-l-height);
-} .select__size-72_lioo6 {
+} .select__size-72_1937e {
     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_lioo6:before {
+} .select__size-72_1937e:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_lioo6 {
+    } .select__selected_1937e {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_lioo6 {
+} .select__highlighted_1937e {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_lioo6:before,
-    .select__highlighted_lioo6 + .select__option_lioo6:before {
+} .select__highlighted_1937e:before,
+    .select__highlighted_1937e + .select__option_1937e:before {
         opacity: 0;
-    } .select__disabled_lioo6 {
+    } .select__disabled_1937e {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_lioo6 {
+} .select__content_1937e {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_lioo6 {
+} .select__textContent_1937e {
     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_lioo6","disabled":"select__disabled_lioo6","size-48":"select__size-48_lioo6","size-56":"select__size-56_lioo6","size-64":"select__size-64_lioo6","size-72":"select__size-72_lioo6","selected":"select__selected_lioo6","highlighted":"select__highlighted_lioo6","content":"select__content_lioo6","textContent":"select__textContent_lioo6"};
+const styles = {"option":"select__option_1937e","disabled":"select__disabled_1937e","size-48":"select__size-48_1937e","size-56":"select__size-56_1937e","size-64":"select__size-64_1937e","size-72":"select__size-72_1937e","selected":"select__selected_1937e","highlighted":"select__highlighted_1937e","content":"select__content_1937e","textContent":"select__textContent_1937e"};
 
 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'
                  * высота опции всегда будет равна высоте одной строчки)