@alfalab/core-components-select 17.5.1 → 17.6.1

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

@@ -1,4 +1,4 @@
-/* hash: 12lnw */
+/* hash: obcx9 */
 :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;
@@ -43,7 +43,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_elt4i {
+} .select__option_1tppw {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -57,36 +57,36 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height)
-} .select__option_elt4i:not(.select__disabled_elt4i):active {
+} .select__option_1tppw:not(.select__disabled_1tppw):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_elt4i.select__checkmarkBefore_elt4i {
+    } .select__option_1tppw.select__checkmarkBefore_1tppw {
         padding: 0 0 0 var(--gap-s)
-    } .select__option_elt4i.select__checkmarkBefore_elt4i.select__mobile_elt4i {
+    } .select__option_1tppw.select__checkmarkBefore_1tppw.select__mobile_1tppw {
             padding-left: var(--gap-m);
-        } .select__option_elt4i.select__checkmarkAfter_elt4i.select__checkmarkAfter_elt4i {
+        } .select__option_1tppw.select__checkmarkAfter_1tppw.select__checkmarkAfter_1tppw {
         padding: 0 var(--gap-s) 0 0
-    } .select__option_elt4i.select__checkmarkAfter_elt4i.select__checkmarkAfter_elt4i.select__mobile_elt4i {
+    } .select__option_1tppw.select__checkmarkAfter_1tppw.select__checkmarkAfter_1tppw.select__mobile_1tppw {
             padding-right: var(--gap-l);
-        } .select__option_elt4i.select__textContent_elt4i {
+        } .select__option_1tppw.select__textContent_1tppw {
         padding: var(--gap-s)
-    } .select__option_elt4i.select__textContent_elt4i.select__mobile_elt4i {
+    } .select__option_1tppw.select__textContent_1tppw.select__mobile_1tppw {
             padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
-        } .select__selected_elt4i {
+        } .select__selected_1tppw {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_elt4i {
+} .select__highlighted_1tppw {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_elt4i {
+} .select__disabled_1tppw {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__checkmarkBeforeContent_elt4i {
+} .select__checkmarkBeforeContent_1tppw {
     margin-right: var(--gap-s);
-} .select__checkmarkAfterContent_elt4i {
+} .select__checkmarkAfterContent_1tppw {
     margin-left: var(--gap-s);
-} .select__content_elt4i {
+} .select__content_1tppw {
     flex: 1;
 }

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

@@ -6,13 +6,13 @@ import { compute } from 'compute-scroll-into-view';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { fnUtils, getDataTestId } from '@alfalab/core-components-shared/modern';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import { defaultAccessor, defaultFilterFn, processOptions } from '../../utils.js';
+import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
 
-const styles = {"component":"select__component_13j3x","popoverInner":"select__popoverInner_13j3x","optionsListWrapper":"select__optionsListWrapper_13j3x","optionsListBorder":"select__optionsListBorder_13j3x","nativeSelect":"select__nativeSelect_13j3x","block":"select__block_13j3x","emptySearchPlaceholder":"select__emptySearchPlaceholder_13j3x","search":"select__search_13j3x"};
+const styles = {"component":"select__component_1pdhu","popoverInner":"select__popoverInner_1pdhu","optionsListWrapper":"select__optionsListWrapper_1pdhu","optionsListBorder":"select__optionsListBorder_1pdhu","nativeSelect":"select__nativeSelect_1pdhu","block":"select__block_1pdhu","emptySearchPlaceholder":"select__emptySearchPlaceholder_1pdhu","search":"select__search_1pdhu"};
 require('./index.css')
 
-const mobileStyles = {"sheet":"select__sheet_mps48","sheetContent":"select__sheetContent_mps48","modalContent":"select__modalContent_mps48","sheetContainer":"select__sheetContainer_mps48","optionsListWrapper":"select__optionsListWrapper_mps48","optionsList":"select__optionsList_mps48","scrollbar":"select__scrollbar_mps48","search":"select__search_mps48","option":"select__option_mps48","optionGroup":"select__optionGroup_mps48"};
+const mobileStyles = {"sheet":"select__sheet_16mze","sheetContent":"select__sheetContent_16mze","modalContent":"select__modalContent_16mze","sheetContainer":"select__sheetContainer_16mze","optionsListWrapper":"select__optionsListWrapper_16mze","optionsList":"select__optionsList_16mze","scrollbar":"select__scrollbar_16mze","search":"select__search_16mze","option":"select__option_16mze","optionGroup":"select__optionGroup_16mze"};
 require('./mobile.css')
 
 /* eslint-disable no-nested-ternary */
@@ -35,7 +35,16 @@ const BaseSelect = forwardRef(
         : [searchState, setSearchState];
     const accessor = searchProps.accessor || defaultAccessor;
     const filterFn = searchProps.filterFn || defaultFilterFn;
-    const { filteredOptions, flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected, (option) => filterFn(accessor(option), search)), [filterFn, accessor, options, search, selected]);
+    const filterGroup = searchProps.filterGroup ?? false;
+    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;
+    const { filteredOptions, flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected, (option) => {
+        if (isGroup(option)) {
+            const groupAccessorValue = groupAccessor(option);
+            return (typeof groupAccessorValue === 'string' &&
+                filterFn(groupAccessorValue, search));
+        }
+        return filterFn(accessor(option), search);
+    }, filterGroup), [options, selected, filterFn, accessor, search, filterGroup, groupAccessor]);
     const scrollIntoView = (node) => {
         if (!node || view === 'mobile')
             return;

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

@@ -1,4 +1,4 @@
-/* hash: 1v9l9 */
+/* hash: lrhbt */
 :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;
@@ -37,21 +37,21 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_13j3x {
+} .select__component_1pdhu {
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_13j3x {
+} .select__popoverInner_1pdhu {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     background: transparent;
     border-radius: 0;
     position: relative;
-} .select__popoverInner_13j3x.select__popoverInner_13j3x {
+} .select__popoverInner_1pdhu.select__popoverInner_1pdhu {
     box-shadow: none;
     border: none;
-} .select__optionsListWrapper_13j3x {
+} .select__optionsListWrapper_1pdhu {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
@@ -60,7 +60,7 @@
     background: var(--select-option-background);
     overflow: hidden;
     will-change: transform;
-} .select__optionsListBorder_13j3x {
+} .select__optionsListBorder_1pdhu {
     position: absolute;
     top: 0;
     right: 0;
@@ -69,7 +69,7 @@
     box-shadow: inset 0 0 0 1px var(--color-light-neutral-300);
     border-radius: inherit;
     pointer-events: none;
-} .select__nativeSelect_13j3x {
+} .select__nativeSelect_1pdhu {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -82,12 +82,12 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_13j3x {
+} .select__block_1pdhu {
     width: 100%;
-} .select__emptySearchPlaceholder_13j3x {
+} .select__emptySearchPlaceholder_1pdhu {
     text-align: center;
-} .select__search_13j3x {
+} .select__search_1pdhu {
     margin: var(--gap-s) var(--gap-s) 0
-} .select__search_13j3x:last-child {
+} .select__search_1pdhu:last-child {
         margin-bottom: var(--gap-s);
     }

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

@@ -1,4 +1,4 @@
-/* hash: 1pl99 */
+/* hash: 1h0qr */
 :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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -27,30 +27,30 @@
     /* checkmark */
 
     /* optgroup */
-} .select__sheet_mps48 {
+} .select__sheet_16mze {
     overflow: hidden;
-} .select__sheetContent_mps48.select__sheetContent_mps48 {
+} .select__sheetContent_16mze.select__sheetContent_16mze {
     padding: 0
-} .select__sheetContent_mps48.select__sheetContent_mps48 .select__modalContent_mps48 {
+} .select__sheetContent_16mze.select__sheetContent_16mze .select__modalContent_16mze {
         padding: 0;
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_mps48 {
+    } .select__sheetContainer_16mze {
     padding: 0;
-} .select__optionsListWrapper_mps48 {
+} .select__optionsListWrapper_16mze {
     flex: 1;
-} .select__optionsList_mps48.select__optionsList_mps48 {
+} .select__optionsList_16mze.select__optionsList_16mze {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_mps48 {
+} .select__scrollbar_16mze {
     flex: 1;
-} .select__search_mps48 {
+} .select__search_16mze {
     padding: var(--gap-xs);
-} .select__option_mps48.select__option_mps48 {
+} .select__option_16mze.select__option_16mze {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
-} .select__option_mps48.select__option_mps48:before {
+} .select__option_16mze.select__option_16mze:before {
         display: none;
-    } .select__optionGroup_mps48.select__optionGroup_mps48 {
+    } .select__optionGroup_16mze.select__optionGroup_16mze {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }

package/modern/components/checkmark/Component.js

@@ -5,7 +5,7 @@ import { Checkbox } from '@alfalab/core-components-checkbox/modern';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"checkmark":"select__checkmark_1b5hu","after":"select__after_1b5hu","single":"select__single_1b5hu","selected":"select__selected_1b5hu","before":"select__before_1b5hu","multiple":"select__multiple_1b5hu","colorIcon":"select__colorIcon_1b5hu"};
+const styles = {"checkmark":"select__checkmark_r8ajq","after":"select__after_r8ajq","single":"select__single_r8ajq","selected":"select__selected_r8ajq","before":"select__before_r8ajq","multiple":"select__multiple_r8ajq","colorIcon":"select__colorIcon_r8ajq"};
 require('./index.css')
 
 const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', }) => {

package/modern/components/checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: 48k06 */
+/* hash: 1kv1m */
 :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-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -39,12 +39,12 @@
     --select-checkmark-border-radius: var(--border-radius-circle);
 
     /* optgroup */
-} .select__checkmark_1b5hu {
+} .select__checkmark_r8ajq {
     flex-shrink: 0;
     margin: var(--select-checkmark-margin)
-} .select__checkmark_1b5hu.select__after_1b5hu {
+} .select__checkmark_r8ajq.select__after_r8ajq {
         margin: var(--select-checkmark-margin-after);
-    } .select__single_1b5hu {
+    } .select__single_r8ajq {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,17 +54,17 @@
     border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size)
-} .select__single_1b5hu.select__selected_1b5hu {
+} .select__single_r8ajq.select__selected_r8ajq {
         opacity: 1;
-    } .select__before_1b5hu {
+    } .select__before_r8ajq {
     display: var(--select-checkmark-before-display)
-} .select__before_1b5hu.select__multiple_1b5hu {
+} .select__before_r8ajq.select__multiple_r8ajq {
         margin-right: var(--gap-s);
         display: var(--select-checkmark-before-display-multiple);
-    } .select__after_1b5hu.select__after_1b5hu {
+    } .select__after_r8ajq.select__after_r8ajq {
     display: var(--select-checkmark-after-display)
-} .select__after_1b5hu.select__after_1b5hu.select__single_1b5hu {
+} .select__after_r8ajq.select__after_r8ajq.select__single_r8ajq {
         display: var(--select-checkmark-after-display-single);
-    } .select__colorIcon_1b5hu {
+    } .select__colorIcon_r8ajq {
     color: var(--color-light-status-positive);
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"checkmark":"select__checkmark_fttx5","selected":"select__selected_fttx5","displayIcon":"select__displayIcon_fttx5","displayBadge":"select__displayBadge_fttx5"};
+const styles = {"checkmark":"select__checkmark_irxiq","selected":"select__selected_irxiq","displayIcon":"select__displayIcon_irxiq","displayBadge":"select__displayBadge_irxiq"};
 require('./index.css')
 
 const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {

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

@@ -1,4 +1,4 @@
-/* hash: 1aviq */
+/* hash: 1w14d */
 :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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -25,7 +25,7 @@
     --select-mobile-checkmark-display-badge: none;
 
     /* optgroup */
-} .select__checkmark_fttx5 {
+} .select__checkmark_irxiq {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -33,12 +33,12 @@
     width: 24px;
     height: 24px;
     opacity: 0
-} .select__checkmark_fttx5:first-child {
+} .select__checkmark_irxiq:first-child {
         display: none;
-    } .select__checkmark_fttx5.select__selected_fttx5 {
+    } .select__checkmark_irxiq.select__selected_irxiq {
         opacity: 1;
-    } .select__displayIcon_fttx5 {
+    } .select__displayIcon_irxiq {
     display: var(--select-mobile-checkmark-display-icon);
-} .select__displayBadge_fttx5 {
+} .select__displayBadge_irxiq {
     display: var(--select-mobile-checkmark-display-badge);
 }

package/modern/components/field/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { useFocus } from '@alfalab/hooks';
 import { joinOptions } from '../../utils.js';
 
-const styles = {"component":"select__component_1m0wx","field":"select__field_1m0wx","disabled":"select__disabled_1m0wx","arrow":"select__arrow_1m0wx","placeholder":"select__placeholder_1m0wx","show-placeholder":"select__show-placeholder_1m0wx","focused":"select__focused_1m0wx","contentWrapper":"select__contentWrapper_1m0wx","value":"select__value_1m0wx","focusVisible":"select__focusVisible_1m0wx"};
+const styles = {"component":"select__component_9hh8i","field":"select__field_9hh8i","disabled":"select__disabled_9hh8i","arrow":"select__arrow_9hh8i","placeholder":"select__placeholder_9hh8i","show-placeholder":"select__show-placeholder_9hh8i","focused":"select__focused_9hh8i","contentWrapper":"select__contentWrapper_9hh8i","value":"select__value_9hh8i","focusVisible":"select__focusVisible_9hh8i"};
 require('./index.css')
 
 const Field = ({ size = 56, open, multiple, error, hint, disabled, label, labelView = 'inner', placeholder, selectedMultiple = [], selected, rightAddons, valueRenderer = joinOptions, setSelectedItems, toggleMenu, Arrow, innerProps, dataTestId, fieldClassName, FormControlComponent, ...restProps }) => {

package/modern/components/field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1qpq4 */
+/* hash: znsmd */
 :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-border-link: #2288fa;
@@ -42,22 +42,22 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_1m0wx {
+} .select__component_9hh8i {
     width: 100%;
     outline: none;
-} .select__field_1m0wx:not(.select__disabled_1m0wx) {
+} .select__field_9hh8i:not(.select__disabled_9hh8i) {
     cursor: pointer
-} .select__field_1m0wx:not(.select__disabled_1m0wx):hover .select__arrow_1m0wx {
+} .select__field_9hh8i:not(.select__disabled_9hh8i):hover .select__arrow_9hh8i {
             opacity: var(--select-arrow-hover-opacity);
-        } .select__disabled_1m0wx {
+        } .select__disabled_9hh8i {
     cursor: var(--disabled-cursor);
-} .select__placeholder_1m0wx {
+} .select__placeholder_9hh8i {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_1m0wx 0.2s ease
-} .select__placeholder_1m0wx.select__focused_1m0wx {
+    animation: select__show-placeholder_9hh8i 0.2s ease
+} .select__placeholder_9hh8i.select__focused_9hh8i {
         color: var(--input-focus-placeholder-color);
-    } .select__contentWrapper_1m0wx {
+    } .select__contentWrapper_9hh8i {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -66,14 +66,14 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .select__value_1m0wx {
+} .select__value_9hh8i {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .select__focusVisible_1m0wx {
+} .select__focusVisible_9hh8i {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} @keyframes select__show-placeholder_1m0wx {
+} @keyframes select__show-placeholder_9hh8i {
     from {
         opacity: 0;
     }

package/modern/components/footer/Component.js

@@ -4,7 +4,7 @@ import { BaseModalContext } from '@alfalab/core-components-base-modal/modern';
 import { ButtonMobile } from '@alfalab/core-components-button/modern/mobile';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
 
-const styles = {"footer":"select__footer_8wlwo","button":"select__button_8wlwo","highlighted":"select__highlighted_8wlwo"};
+const styles = {"footer":"select__footer_1m3c1","button":"select__button_1m3c1","highlighted":"select__highlighted_1m3c1"};
 require('./index.css')
 
 const Footer = ({ handleApply, handleClear, showClear, clearText = 'Сбросить', applyText = 'Применить', dataTestId, }) => {

package/modern/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1urxe */
+/* hash: o0o00 */
 :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;
@@ -26,17 +26,17 @@
     /* checkmark */
 
     /* optgroup */
-} .select__footer_8wlwo {
+} .select__footer_1m3c1 {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-modal-bg-primary)
-} .select__footer_8wlwo .select__button_8wlwo:first-of-type {
+} .select__footer_1m3c1 .select__button_1m3c1:first-of-type {
         margin-right: var(--gap-m);
-    } .select__button_8wlwo {
+    } .select__button_1m3c1 {
     width: 50%;
-} .select__highlighted_8wlwo {
+} .select__highlighted_1m3c1 {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

package/modern/components/optgroup/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 
-const styles = {"optgroup":"select__optgroup_70lmy","label":"select__label_70lmy","size-64":"select__size-64_70lmy","size-72":"select__size-72_70lmy"};
+const styles = {"optgroup":"select__optgroup_suzjx","label":"select__label_suzjx","size-64":"select__size-64_suzjx","size-72":"select__size-72_suzjx"};
 require('./index.css')
 
 const Optgroup = ({ children, className, label, size = 48 }) => (React.createElement(React.Fragment, null,

package/modern/components/optgroup/index.css

@@ -1,4 +1,4 @@
-/* hash: 1gl6a */
+/* hash: 732cr */
 :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;
@@ -35,7 +35,7 @@
     --select-optgroup-right-padding: var(--gap-s);
     --select-optgroup-l-left-padding: var(--gap-m);
     --select-optgroup-l-right-padding: var(--gap-m);
-} .select__optgroup_70lmy {
+} .select__optgroup_suzjx {
     position: relative;
     display: flex;
     align-items: center;
@@ -44,9 +44,9 @@
     box-sizing: border-box;
     background: var(--select-optgroup-background);
     min-height: 40px
-} .select__optgroup_70lmy + *[role='option']:before {
+} .select__optgroup_suzjx + *[role='option']:before {
         display: none;
-    } .select__label_70lmy {
+    } .select__label_suzjx {
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
@@ -55,8 +55,8 @@
 
     display: block;
     color: var(--select-optgroup-color);
-} .select__size-64_70lmy,
-.select__size-72_70lmy {
+} .select__size-64_suzjx,
+.select__size-72_suzjx {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/modern/components/option/Component.js

@@ -4,7 +4,7 @@ import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { Checkmark as Checkmark$1 } from '../checkmark/Component.js';
 import { Checkmark } from '../checkmark-mobile/Component.js';
 
-const styles = {"option":"select__option_ireal","disabled":"select__disabled_ireal","size-48":"select__size-48_ireal","size-56":"select__size-56_ireal","size-64":"select__size-64_ireal","size-72":"select__size-72_ireal","selected":"select__selected_ireal","highlighted":"select__highlighted_ireal","content":"select__content_ireal","textContent":"select__textContent_ireal"};
+const styles = {"option":"select__option_ftap0","disabled":"select__disabled_ftap0","size-48":"select__size-48_ftap0","size-56":"select__size-56_ftap0","size-64":"select__size-64_ftap0","size-72":"select__size-72_ftap0","selected":"select__selected_ftap0","highlighted":"select__highlighted_ftap0","content":"select__content_ftap0","textContent":"select__textContent_ftap0"};
 require('./index.css')
 
 const Option = ({ size = 48, className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark: Checkmark$2 = mobile ? Checkmark : Checkmark$1, innerProps, dataTestId, }) => {

package/modern/components/option/index.css

@@ -1,4 +1,4 @@
-/* hash: ambw1 */
+/* hash: 1wl23 */
 :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-border-primary: #d5d6dc;
@@ -53,7 +53,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_ireal {
+} .select__option_ftap0 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -68,10 +68,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer
-} .select__option_ireal:not(.select__disabled_ireal):active {
+} .select__option_ftap0:not(.select__disabled_ftap0):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_ireal:before {
+    } .select__option_ftap0:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -81,42 +81,42 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_ireal:first-child:before {
+    } .select__option_ftap0:first-child:before {
         display: none;
-    } .select__size-48_ireal {
+    } .select__size-48_ftap0 {
     min-height: var(--size-s-height);
-} .select__size-56_ireal {
+} .select__size-56_ftap0 {
     min-height: var(--size-m-height);
-} .select__size-64_ireal {
+} .select__size-64_ftap0 {
     min-height: var(--size-l-height);
-} .select__size-72_ireal {
+} .select__size-72_ftap0 {
     min-height: var(--size-xl-height);
-} .select__size-64_ireal,
-.select__size-72_ireal {
+} .select__size-64_ftap0,
+.select__size-72_ftap0 {
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding)
-} .select__size-64_ireal:before, .select__size-72_ireal:before {
+} .select__size-64_ftap0:before, .select__size-72_ftap0:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_ireal {
+    } .select__selected_ftap0 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_ireal {
+} .select__highlighted_ftap0 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color)
-} .select__highlighted_ireal:before,
-    .select__highlighted_ireal + .select__option_ireal:before {
+} .select__highlighted_ftap0:before,
+    .select__highlighted_ftap0 + .select__option_ftap0:before {
         opacity: 0;
-    } .select__disabled_ireal {
+    } .select__disabled_ftap0 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_ireal {
+} .select__content_ftap0 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_ireal {
+} .select__textContent_ftap0 {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 }

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

@@ -8,7 +8,7 @@ import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js'
 import { useVisibleOptions, isGroup } from '../../utils.js';
 import { Optgroup } from '../optgroup/Component.js';
 
-const styles = {"optionsList":"select__optionsList_r1501","optionsListHeader":"select__optionsListHeader_r1501","headerHighlighted":"select__headerHighlighted_r1501","optionsListFooter":"select__optionsListFooter_r1501","withBorder":"select__withBorder_r1501","scrollable":"select__scrollable_r1501","emptyPlaceholder":"select__emptyPlaceholder_r1501","size-64":"select__size-64_r1501","size-72":"select__size-72_r1501"};
+const styles = {"optionsList":"select__optionsList_56r32","optionsListHeader":"select__optionsListHeader_56r32","headerHighlighted":"select__headerHighlighted_56r32","optionsListFooter":"select__optionsListFooter_56r32","withBorder":"select__withBorder_56r32","scrollable":"select__scrollable_56r32","emptyPlaceholder":"select__emptyPlaceholder_56r32","size-64":"select__size-64_56r32","size-72":"select__size-72_56r32"};
 require('./index.css')
 
 const createCounter = () => {