@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

package/select/modern/components/option/Component.js

@@ -7,7 +7,7 @@ import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"option":"select__option_2ab4z","disabled":"select__disabled_2ab4z","s":"select__s_2ab4z","m":"select__m_2ab4z","l":"select__l_2ab4z","xl":"select__xl_2ab4z","selected":"select__selected_2ab4z","highlighted":"select__highlighted_2ab4z","content":"select__content_2ab4z","textContent":"select__textContent_2ab4z"};
+const styles = {"option":"select__option_5rboc","disabled":"select__disabled_5rboc","s":"select__s_5rboc","m":"select__m_5rboc","l":"select__l_5rboc","xl":"select__xl_5rboc","selected":"select__selected_5rboc","highlighted":"select__highlighted_5rboc","content":"select__content_5rboc","textContent":"select__textContent_5rboc"};
 require('./index.css');
 
 const Option = ({ size = 's', className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark: Checkmark$2 = mobile ? Checkmark : Checkmark$1, innerProps, dataTestId, }) => {

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

@@ -1,4 +1,4 @@
-/* hash: 1kdce */
+/* hash: 1rod2 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -53,7 +53,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_2ab4z {
+} .select__option_5rboc {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -68,10 +68,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer
-} .select__option_2ab4z:not(.select__disabled_2ab4z):active {
+} .select__option_5rboc:not(.select__disabled_5rboc):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_2ab4z:before {
+    } .select__option_5rboc:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -81,46 +81,46 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_2ab4z:first-child:before {
+    } .select__option_5rboc:first-child:before {
         display: none;
-    } .select__s_2ab4z {
+    } .select__s_5rboc {
     min-height: var(--size-s-height);
-} .select__m_2ab4z {
+} .select__m_5rboc {
     min-height: var(--size-m-height);
-} .select__l_2ab4z {
+} .select__l_5rboc {
     min-height: var(--size-l-height);
-} .select__xl_2ab4z {
+} .select__xl_5rboc {
     min-height: var(--size-xl-height);
-} .select__l_2ab4z,
-.select__xl_2ab4z {
+} .select__l_5rboc,
+.select__xl_5rboc {
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding)
-} .select__l_2ab4z:before, .select__xl_2ab4z:before {
+} .select__l_5rboc:before, .select__xl_5rboc:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_2ab4z {
+    } .select__selected_5rboc {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_2ab4z {
+} .select__highlighted_5rboc {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color)
-} .select__highlighted_2ab4z:before,
-    .select__highlighted_2ab4z + .select__option_2ab4z:before {
+} .select__highlighted_5rboc:before,
+    .select__highlighted_5rboc + .select__option_5rboc:before {
         opacity: 0;
-    } .select__disabled_2ab4z {
+    } .select__disabled_5rboc {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_2ab4z {
+} .select__content_5rboc {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_2ab4z {
+} .select__textContent_5rboc {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 } /* IE min-height fix */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__option_2ab4z:after {
+    .select__option_5rboc:after {
         min-height: inherit;
         font-size: 0;
         content: '';

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

@@ -7,7 +7,7 @@ import { DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
 import { useVisibleOptions, isGroup } from '../../utils.js';
 import { Optgroup } from '../optgroup/Component.js';
 
-const styles = {"optionsList":"select__optionsList_1iyoz","optionsListHeader":"select__optionsListHeader_1iyoz","optionsListFooter":"select__optionsListFooter_1iyoz","withBorder":"select__withBorder_1iyoz","scrollable":"select__scrollable_1iyoz","emptyPlaceholder":"select__emptyPlaceholder_1iyoz","l":"select__l_1iyoz","xl":"select__xl_1iyoz"};
+const styles = {"optionsList":"select__optionsList_1fhog","optionsListHeader":"select__optionsListHeader_1fhog","optionsListFooter":"select__optionsListFooter_1fhog","withBorder":"select__withBorder_1fhog","scrollable":"select__scrollable_1fhog","emptyPlaceholder":"select__emptyPlaceholder_1fhog","l":"select__l_1fhog","xl":"select__xl_1fhog"};
 require('./index.css');
 
 const createCounter = () => {

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

@@ -1,4 +1,4 @@
-/* hash: 1541y */
+/* hash: zygcz */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb;
@@ -29,28 +29,28 @@
     /* checkmark */
 
     /* optgroup */
-} .select__optionsList_1iyoz {
+} .select__optionsList_1fhog {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
-} .select__optionsListHeader_1iyoz {
+} .select__optionsListHeader_1fhog {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
-} .select__optionsListFooter_1iyoz {
+} .select__optionsListFooter_1fhog {
     position: sticky;
     bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__optionsListFooter_1iyoz.select__withBorder_1iyoz {
+} .select__optionsListFooter_1fhog.select__withBorder_1fhog {
         border-top: 1px solid var(--color-light-border-secondary);
-    } .select__scrollable_1iyoz {
+    } .select__scrollable_1fhog {
     overflow: auto;
     width: 100%;
-} .select__emptyPlaceholder_1iyoz {
+} .select__emptyPlaceholder_1fhog {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_1iyoz .select__emptyPlaceholder_1iyoz,
-.select__xl_1iyoz .select__emptyPlaceholder_1iyoz {
+} .select__l_1fhog .select__emptyPlaceholder_1fhog,
+.select__xl_1fhog .select__emptyPlaceholder_1fhog {
     padding: var(--gap-xl) var(--gap-m);
 }

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

@@ -8,7 +8,7 @@ import { DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
 import { usePrevious, lastIndexOf, useVisibleOptions, isGroup } from '../../utils.js';
 import { Optgroup } from '../optgroup/Component.js';
 
-const styles = {"virtualOptionsList":"select__virtualOptionsList_520i7","virtualOptionsListHeader":"select__virtualOptionsListHeader_520i7","virtualOptionsListFooter":"select__virtualOptionsListFooter_520i7","withBorder":"select__withBorder_520i7","scrollable":"select__scrollable_520i7","inner":"select__inner_520i7","virtualRow":"select__virtualRow_520i7","highlighted":"select__highlighted_520i7","emptyPlaceholder":"select__emptyPlaceholder_520i7","l":"select__l_520i7","xl":"select__xl_520i7"};
+const styles = {"virtualOptionsList":"select__virtualOptionsList_8j11k","virtualOptionsListHeader":"select__virtualOptionsListHeader_8j11k","virtualOptionsListFooter":"select__virtualOptionsListFooter_8j11k","withBorder":"select__withBorder_8j11k","scrollable":"select__scrollable_8j11k","inner":"select__inner_8j11k","virtualRow":"select__virtualRow_8j11k","highlighted":"select__highlighted_8j11k","emptyPlaceholder":"select__emptyPlaceholder_8j11k","l":"select__l_8j11k","xl":"select__xl_8j11k"};
 require('./index.css');
 
 const VirtualOptionsList = forwardRef(({ size = 's', flatOptions = [], highlightedIndex = -1, className, getOptionProps, Option, open, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, header, footer, showFooter = true, optionsListWidth, onScroll, nativeScrollbar: nativeScrollbarProp, }, ref) => {

package/select/modern/components/virtual-options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: aezsy */
+/* hash: 1png1 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-primary: #dcdcdd;
@@ -35,34 +35,34 @@
     /* checkmark */
 
     /* optgroup */
-} .select__virtualOptionsList_520i7 {
+} .select__virtualOptionsList_8j11k {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: sticky;
-} .select__virtualOptionsListHeader_520i7 {
+} .select__virtualOptionsListHeader_8j11k {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-border-secondary);
-} .select__virtualOptionsListFooter_520i7 {
+} .select__virtualOptionsListFooter_8j11k {
     position: sticky;
     bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__virtualOptionsListFooter_520i7.select__withBorder_520i7 {
+} .select__virtualOptionsListFooter_8j11k.select__withBorder_8j11k {
         border-top: 1px solid var(--color-light-border-secondary);
-    } .select__scrollable_520i7 {
+    } .select__scrollable_8j11k {
     position: relative;
     overflow: auto;
     width: 100%;
-} .select__inner_520i7 {
+} .select__inner_8j11k {
     position: relative;
     width: 100%;
-} .select__virtualRow_520i7 {
+} .select__virtualRow_8j11k {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
-} .select__virtualRow_520i7:before {
+} .select__virtualRow_8j11k:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -72,15 +72,15 @@
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
-    } .select__virtualRow_520i7:first-child:before {
+    } .select__virtualRow_8j11k:first-child:before {
         display: none;
-    } .select__highlighted_520i7:before,
-    .select__highlighted_520i7 + .select__virtualRow_520i7:before {
+    } .select__highlighted_8j11k:before,
+    .select__highlighted_8j11k + .select__virtualRow_8j11k:before {
         display: none;
-    } .select__emptyPlaceholder_520i7 {
+    } .select__emptyPlaceholder_8j11k {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_520i7 .select__emptyPlaceholder_520i7,
-.select__xl_520i7 .select__emptyPlaceholder_520i7 {
+} .select__l_8j11k .select__emptyPlaceholder_8j11k,
+.select__xl_8j11k .select__emptyPlaceholder_8j11k {
     padding: var(--gap-xl) var(--gap-m);
 }

package/select/modern/desktop-63dec22f.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from "react";
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/select/modern/desktop.js

@@ -1,5 +1,6 @@
 export { SelectDesktop } from './Component.desktop.js';
 import 'react';
+import '../../form-control/modern/desktop';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -12,7 +13,6 @@ import '../../shared/modern';
 import '@alfalab/hooks';
 import './components/native-select/Component.js';
 import './components/field/Component.js';
-import '../../form-control/modern';
 import './components/optgroup/Component.js';
 import './components/option/Component.js';
 import './components/checkmark/Component.js';

package/select/modern/hook-81e56138.js

@@ -0,0 +1,121 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { processOptions } from './utils.js';
+import { OptionsList } from './components/options-list/Component.js';
+import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
+import { Footer } from './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import '../../scrollbar/modern';
+import '@alfalab/hooks';
+import './components/optgroup/Component.js';
+import '../../button/modern/desktop';
+import '../../checkbox/modern';
+
+const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGetOptionProps, showClear = true, showHeaderWithSelectAll, selectedDraft = [], flatOptions = [], OptionsList: OptionsList$1 = OptionsList, onApply = () => null, onClear = () => null, onClose = () => null, visibleOptions = DEFAULT_VISIBLE_OPTIONS, Footer: Footer$1 = Footer, Header: Header$1 = Header, headerProps, ...restProps }, ref) => {
+    const getOptionProps = useCallback((option, index) => {
+        const optionProps = defaultGetOptionProps(option, index);
+        const selected = option.key === SELECT_ALL_KEY
+            ? selectedDraft.length === flatOptions.length - 1
+            : selectedDraft.includes(option);
+        return {
+            ...optionProps,
+            selected,
+        };
+    }, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
+    const handleApply = useCallback(() => {
+        onApply();
+        toggleMenu();
+    }, [onApply, toggleMenu]);
+    const handleClear = useCallback(() => {
+        onClear();
+        toggleMenu();
+    }, [onClear, toggleMenu]);
+    useEffect(() => {
+        const activeElement = document.activeElement;
+        return () => {
+            onClose();
+            if (activeElement) {
+                activeElement.focus();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: showHeaderWithSelectAll ? React.createElement(Header$1, { ...headerProps }) : undefined, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft }) }));
+});
+
+const SELECT_ALL_KEY = 'select_all';
+const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
+function useSelectWithApply({ options, selected, onChange = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, }) {
+    const { flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected), [options, selected]);
+    const [selectedDraft, setSelectedDraft] = useState(selectedOptions);
+    const selectedOptionsRef = useRef(selectedOptions);
+    const handleApply = () => {
+        onChange({
+            selected: selectedDraft[0],
+            selectedMultiple: selectedDraft,
+            initiator: null,
+        });
+    };
+    const handleClear = () => {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+        });
+    };
+    const handleToggleAll = () => {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+    const handleChange = ({ initiator, ...restArgs }) => {
+        if (!initiator) {
+            onChange({
+                initiator: null,
+                ...restArgs,
+            });
+            return;
+        }
+        const initiatorSelected = selectedDraft.includes(initiator) ||
+            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        }
+        else {
+            setSelectedDraft(initiatorSelected
+                ? selectedDraft.filter((o) => o !== initiator)
+                : selectedDraft.concat(initiator));
+        }
+    };
+    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);
+    useEffect(() => {
+        setSelectedDraft(selectedOptions);
+        selectedOptionsRef.current = selectedOptions;
+    }, [selectedOptions]);
+    const memoizedOptions = useMemo(() => (showSelectAll ? [selectAllOption, ...options] : options), [options, showSelectAll]);
+    return {
+        OptionsList: OptionsListWithApply,
+        optionsListProps: {
+            ...optionsListProps,
+            OptionsList,
+            showClear,
+            onClear: handleClear,
+            onApply: handleApply,
+            onClose: handleClose,
+            selectedDraft,
+            showHeaderWithSelectAll,
+            headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            },
+        },
+        allowUnselect: true,
+        multiple: true,
+        options: memoizedOptions,
+        onChange: handleChange,
+        selected,
+    };
+}
+
+export { OptionsListWithApply as O, SELECT_ALL_KEY as S, useSelectWithApply as u };

package/select/modern/index-ebda875c.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+// TODO Вид кнопок зависит от порядка импорта стилей.
+/* eslint-disable simple-import-sort/imports */
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+export { LOADER_MIN_DISPLAY_INTERVAL, BaseButton, SpinnerProps, Spinner };

package/select/modern/index.js

@@ -2,6 +2,7 @@ export { SelectResponsive as Select } from './Component.responsive.js';
 import 'react';
 import '@alfalab/hooks';
 import './Component.desktop.js';
+import '../../form-control/modern/desktop';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -13,7 +14,6 @@ import '../../popover/modern';
 import '../../shared/modern';
 import './components/native-select/Component.js';
 import './components/field/Component.js';
-import '../../form-control/modern';
 import './components/optgroup/Component.js';
 import './components/option/Component.js';
 import './components/checkmark/Component.js';
@@ -25,16 +25,18 @@ import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '../../scrollbar/modern';
 import './Component.mobile.js';
+import '../../form-control/modern/mobile';
 import './components/base-select-mobile/Component.js';
 import '../../bottom-sheet/modern';
 import '../../modal/modern/mobile';
 import './components/base-select-mobile/footer/Component.js';
 import '../../base-modal/modern';
-import '../../button/modern';
+import '../../button/modern/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-a6d8b79e.js';
+import './hook-81e56138.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import '../../button/modern/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import './utils.js';
 import './consts.js';

package/select/modern/mobile-96988a65.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile-ebda875c";
+export {};

package/select/modern/mobile.js

@@ -1,6 +1,7 @@
 export { SelectMobile } from './Component.mobile.js';
 export { SelectModalMobile } from './Component.modal.mobile.js';
 import 'react';
+import '../../form-control/modern/mobile';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -11,7 +12,6 @@ import '../../bottom-sheet/modern';
 import '../../modal/modern/mobile';
 import '../../shared/modern';
 import './components/field/Component.js';
-import '../../form-control/modern';
 import '@alfalab/hooks';
 import './components/optgroup/Component.js';
 import './components/option/Component.js';
@@ -25,11 +25,12 @@ import './components/options-list/Component.js';
 import '../../scrollbar/modern';
 import './components/base-select-mobile/footer/Component.js';
 import '../../base-modal/modern';
-import '../../button/modern';
+import '../../button/modern/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-a6d8b79e.js';
+import './hook-81e56138.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import '../../button/modern/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import './utils.js';
 import './consts.js';

package/select/modern/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-a6d8b79e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-81e56138.js';
 import 'react';
 import '../../../skeleton/modern';
 import '../components/option/Component.js';
@@ -17,7 +17,7 @@ import '../../../scrollbar/modern';
 import '@alfalab/hooks';
 import '../components/optgroup/Component.js';
 import './useSelectWithApply/options-list-with-apply/footer/Component.js';
-import '../../../button/modern';
+import '../../../button/modern/desktop';
 import './useSelectWithApply/options-list-with-apply/header/Component.js';
 import '../utils.js';
 import '../consts.js';

package/select/modern/presets/useSelectWithApply/hook.js

@@ -1,5 +1,5 @@
 import 'react';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-a6d8b79e.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-81e56138.js';
 import '../../components/options-list/Component.js';
 import 'react-merge-refs';
 import 'classnames';
@@ -7,7 +7,7 @@ import '../../../../scrollbar/modern';
 import '@alfalab/hooks';
 import '../../components/optgroup/Component.js';
 import './options-list-with-apply/footer/Component.js';
-import '../../../../button/modern';
+import '../../../../button/modern/desktop';
 import './options-list-with-apply/header/Component.js';
 import '../../../../checkbox/modern';
 import '../../utils.js';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-a6d8b79e.js';
+export { O as OptionsListWithApply } from '../../../hook-81e56138.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';
@@ -8,7 +8,7 @@ import 'classnames';
 import '../../../../../scrollbar/modern';
 import '@alfalab/hooks';
 import '../../../components/optgroup/Component.js';
-import '../../../../../button/modern';
+import '../../../../../button/modern/desktop';
 import '../../../../../checkbox/modern';
 import '../../../consts.js';
 import '../../../utils.js';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Button } from '../../../../../../button/modern';
+import { ButtonDesktop } from '../../../../../../button/modern/desktop';
 
-const styles = {"footer":"select__footer_144g5"};
+const styles = {"footer":"select__footer_17lgo"};
 require('./index.css');
 
 const Footer = ({ handleApply, handleClear, showClear, selectedDraft = [], }) => (React.createElement("div", { 
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: 0, className: styles.footer },
-    React.createElement(Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
-    showClear && selectedDraft.length > 0 && (React.createElement(Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+    React.createElement(ButtonDesktop, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+    showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
 
 export { Footer };

package/select/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: tf4y4 */
+/* hash: jr1xi */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_144g5 {
+} .select__footer_17lgo {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_144g5 > * + * {
+} .select__footer_17lgo > * + * {
         margin-left: var(--gap-xs);
     }

package/select/modern/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Checkbox } from '../../../../../../checkbox/modern';
 
-const styles = {"desktop":"select__desktop_1jjm0","mobile":"select__mobile_1jjm0"};
+const styles = {"desktop":"select__desktop_1n0mj","mobile":"select__mobile_1n0mj"};
 require('./index.css');
 
 const Header = ({ onChange, checked, indeterminate, mobile }) => (React.createElement("div", { className: cn({ [styles.desktop]: !mobile, [styles.mobile]: mobile }) },

package/select/modern/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1t43i */
+/* hash: 1vvuw */
 :root {
 } /* 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 */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_1jjm0 {
+} .select__desktop_1n0mj {
     padding: var(--gap-s);
-} .select__mobile_1jjm0 {
+} .select__mobile_1n0mj {
     padding: var(--gap-s) var(--gap-xs);
 }

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-a6d8b79e";
+export * from "../../../hook-81e56138";

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-a6d8b79e.js';
+export { O as OptionsListWithApply } from '../../../hook-81e56138.js';
 import 'react';
 import '../../../components/options-list/Component.js';
 import 'react-merge-refs';
@@ -7,7 +7,7 @@ import '../../../../../scrollbar/modern';
 import '@alfalab/hooks';
 import '../../../components/optgroup/Component.js';
 import './footer/Component.js';
-import '../../../../../button/modern';
+import '../../../../../button/modern/desktop';
 import './header/Component.js';
 import '../../../../../checkbox/modern';
 import '../../../utils.js';