@alfalab/core-components-select 19.0.6 → 19.1.0-alfasans

package/modern/presets/useSelectWithApply/hook.d.ts

@@ -55,8 +55,13 @@ export declare type UseSelectWithApplyProps = {
      * @default 'reset-footer'
      */
     resetName?: string;
+    /**
+     * Позиция чекбокса "Выбрать все" в Header
+     * @default 'before'
+     */
+    checkmarkPosition?: 'before' | 'after';
 };
-export declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, applyName, resetName, }: UseSelectWithApplyProps): {
+export declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, checkmarkPosition, showSearch, searchProps, applyName, resetName, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<Pick<import("../../typings").SelectProps, "client"> & {
         className?: string | undefined;
         optionGroupClassName?: string | undefined;
@@ -237,6 +242,7 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
         showClear: boolean;
         showSelectAll: boolean;
         showHeaderWithSelectAll: boolean;
+        checkmarkPosition: "before" | "after";
         showSearch: boolean;
         searchProps: {
             componentProps?: import("../../typings").SearchProps | undefined;

package/modern/presets/useSelectWithApply/hook.js

@@ -5,7 +5,7 @@ import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions,
 import { OptionsListWithApply } from './options-list-with-apply/Component.js';
 
 const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
-function useSelectWithApply({ options, selected, onChange = () => null, onSelectAllClick = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, showSearch = false, searchProps = {}, applyName = 'apply-footer', resetName = 'reset-footer', }) {
+function useSelectWithApply({ options, selected, onChange = () => null, onSelectAllClick = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, checkmarkPosition = 'before', showSearch = false, searchProps = {}, applyName = 'apply-footer', resetName = 'reset-footer', }) {
     const [searchState, setSearchState] = useState('');
     const [search, setSearch] = typeof searchProps?.value === 'string'
         ? [searchProps.value, searchProps.onChange]
@@ -99,6 +99,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, onSelect
                 checked: selectedDraft.length === flatOptions.length ||
                     flatOptions.every(({ key }) => selectedKeys.includes(key)),
                 onChange: handleToggleAll,
+                checkmarkPosition,
             },
         },
         multiple: true,
@@ -123,6 +124,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, onSelect
             showClear,
             showSelectAll,
             showHeaderWithSelectAll,
+            checkmarkPosition,
             showSearch,
             searchProps,
             applyName,

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

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../src/presets/useSelectWithApply/hook.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport reactFastCompare from 'react-fast-compare';\n\nimport { SELECT_ALL_KEY } from '../../consts';\nimport { type AnyObject, type BaseSelectProps, type OptionShape } from '../../typings';\nimport {\n    defaultAccessor,\n    defaultFilterFn,\n    defaultGroupAccessor,\n    isGroup,\n    processOptions,\n} from '../../utils';\n\nimport { OptionsListWithApply } from './options-list-with-apply';\n\nexport type UseSelectWithApplyProps = {\n    /**\n     * Список выбранных пунктов\n     */\n    selected: BaseSelectProps['selected'];\n\n    /**\n     * Список вариантов выбора\n     */\n    options: BaseSelectProps['options'];\n\n    /**\n     * Обработчик выбора\n     */\n    onChange: BaseSelectProps['onChange'];\n\n    /**\n     * Дополнительный обработчик клика на чекбокс выбрать все\n     */\n    onSelectAllClick?: (selectedMultiple: OptionShape[]) => void;\n\n    /**\n     * Компонент выпадающего меню\n     */\n    OptionsList?: BaseSelectProps['OptionsList'];\n\n    /**\n     * Пропсы, которые будут прокинуты в компонент списка\n     */\n    optionsListProps?: BaseSelectProps['optionsListProps'];\n\n    /**\n     * Включает отображение поиска\n     */\n    showSearch?: BaseSelectProps['showSearch'];\n\n    /**\n     *  Настройки поиска\n     */\n    searchProps?: BaseSelectProps['searchProps'];\n\n    /**\n     * Показывать кнопку очистки\n     */\n    showClear?: boolean;\n\n    /**\n     * Показывать пункт \"Выбрать все\"\n     */\n    showSelectAll?: boolean;\n\n    /**\n     * Показывать пункт \"Выбрать все\" в заголовке списка\n     */\n    showHeaderWithSelectAll?: boolean;\n\n    /**\n     * Значение name при применении выбора\n     * @default 'apply-footer'\n     */\n    applyName?: string;\n\n    /**\n     * Значение name при сбросе выбора\n     * @default 'reset-footer'\n     */\n    resetName?: string;\n};\n\nconst selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };\n\nexport function useSelectWithApply({\n    options,\n    selected,\n    onChange = () => null,\n    onSelectAllClick = () => null,\n    OptionsList,\n    optionsListProps = {},\n    showClear = true,\n    showSelectAll = false,\n    showHeaderWithSelectAll = false,\n    showSearch = false,\n    searchProps = {},\n    applyName = 'apply-footer',\n    resetName = 'reset-footer',\n}: UseSelectWithApplyProps) {\n    const [searchState, setSearchState] = useState('');\n\n    const [search, setSearch] =\n        typeof searchProps?.value === 'string'\n            ? [searchProps.value, searchProps.onChange]\n            : [searchState, setSearchState];\n\n    const accessor = searchProps.accessor || defaultAccessor;\n    const filterFn = searchProps.filterFn || defaultFilterFn;\n    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;\n    const filterGroup = searchProps.filterGroup ?? false;\n\n    const { flatOptions, filteredOptions, selectedOptions } = useMemo(\n        () =>\n            processOptions(\n                options,\n                selected,\n                showSearch\n                    ? (option) => {\n                          if (isGroup(option)) {\n                              const groupAccessorValue = groupAccessor(option);\n\n                              return (\n                                  typeof groupAccessorValue === 'string' &&\n                                  filterFn(groupAccessorValue, search)\n                              );\n                          }\n\n                          return filterFn(accessor(option), search);\n                      }\n                    : undefined,\n                filterGroup,\n            ),\n        [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor],\n    );\n\n    const [selectedDraft, setSelectedDraft] = useState<OptionShape[]>(selectedOptions);\n\n    const selectedOptionsRef = useRef<OptionShape[]>(selectedOptions);\n\n    const handleApply = () => {\n        onChange({\n            selected: selectedDraft[0],\n            selectedMultiple: selectedDraft,\n            initiator: null,\n            name: applyName,\n        });\n    };\n\n    const handleClear = () => {\n        setSelectedDraft([]);\n        onChange({\n            selected: null,\n            selectedMultiple: [],\n            initiator: null,\n            name: resetName,\n        });\n    };\n\n    const handleToggleAll = () => {\n        const optionsToSet = flatOptions.length === selectedDraft.length ? [] : flatOptions;\n\n        onSelectAllClick(optionsToSet);\n        setSelectedDraft(optionsToSet);\n    };\n\n    const selectedKeys = useMemo(() => selectedDraft.map(({ key }) => key), [selectedDraft]);\n\n    const handleChange: Required<BaseSelectProps>['onChange'] = ({ initiator, ...restArgs }) => {\n        if (!initiator) {\n            onChange({\n                initiator: null,\n                ...restArgs,\n            });\n\n            return;\n        }\n\n        const initiatorSelected =\n            selectedDraft.some(\n                (selectedDraftOption) => selectedDraftOption.key === initiator.key,\n            ) ||\n            (initiator.key === SELECT_ALL_KEY &&\n                (selectedDraft.length === flatOptions.length ||\n                    flatOptions.every(({ key }) => selectedKeys.includes(key))));\n\n        if (initiator.key === SELECT_ALL_KEY) {\n            setSelectedDraft(initiatorSelected ? [] : flatOptions);\n        } else {\n            setSelectedDraft(\n                initiatorSelected\n                    ? selectedDraft.filter((o) => o.key !== initiator.key)\n                    : selectedDraft.concat(initiator),\n            );\n        }\n    };\n\n    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);\n\n    useEffect(() => {\n        // устанавливать selectedDraft если selectedOptions изменились\n        if (!reactFastCompare(selectedOptionsRef.current, selectedOptions)) {\n            setSelectedDraft(selectedOptions);\n        }\n        selectedOptionsRef.current = selectedOptions;\n    }, [selectedOptions]);\n\n    const memoizedOptions = useMemo(\n        () =>\n            filteredOptions.length && showSelectAll\n                ? [selectAllOption, ...filteredOptions]\n                : filteredOptions,\n        [filteredOptions, showSelectAll],\n    );\n\n    return {\n        OptionsList: OptionsListWithApply,\n        optionsListProps: {\n            ...(optionsListProps as AnyObject),\n            OptionsList,\n            showClear,\n            onClear: handleClear,\n            onApply: handleApply,\n            onClose: handleClose,\n            selectedDraft,\n            setSelectedDraft,\n            showHeaderWithSelectAll,\n            headerProps: {\n                ...(optionsListProps as AnyObject)?.headerProps,\n                indeterminate: selectedDraft.length > 0,\n                checked:\n                    selectedDraft.length === flatOptions.length ||\n                    flatOptions.every(({ key }) => selectedKeys.includes(key)),\n                onChange: handleToggleAll,\n            },\n        },\n        multiple: true,\n        options: memoizedOptions,\n        onChange: handleChange,\n        selected,\n        showSearch,\n        searchProps: showSearch\n            ? {\n                  ...searchProps,\n                  value: search,\n                  onChange: setSearch,\n              }\n            : undefined,\n        /* Костыль для респонсив селекта. В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */\n        originalProps: {\n            options,\n            selected,\n            onChange,\n            OptionsList,\n            optionsListProps,\n            showClear,\n            showSelectAll,\n            showHeaderWithSelectAll,\n            showSearch,\n            searchProps,\n            applyName,\n            resetName,\n        },\n    };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"hook.js","sources":["../../../src/presets/useSelectWithApply/hook.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport reactFastCompare from 'react-fast-compare';\n\nimport { SELECT_ALL_KEY } from '../../consts';\nimport { type AnyObject, type BaseSelectProps, type OptionShape } from '../../typings';\nimport {\n    defaultAccessor,\n    defaultFilterFn,\n    defaultGroupAccessor,\n    isGroup,\n    processOptions,\n} from '../../utils';\n\nimport { OptionsListWithApply } from './options-list-with-apply';\n\nexport type UseSelectWithApplyProps = {\n    /**\n     * Список выбранных пунктов\n     */\n    selected: BaseSelectProps['selected'];\n\n    /**\n     * Список вариантов выбора\n     */\n    options: BaseSelectProps['options'];\n\n    /**\n     * Обработчик выбора\n     */\n    onChange: BaseSelectProps['onChange'];\n\n    /**\n     * Дополнительный обработчик клика на чекбокс выбрать все\n     */\n    onSelectAllClick?: (selectedMultiple: OptionShape[]) => void;\n\n    /**\n     * Компонент выпадающего меню\n     */\n    OptionsList?: BaseSelectProps['OptionsList'];\n\n    /**\n     * Пропсы, которые будут прокинуты в компонент списка\n     */\n    optionsListProps?: BaseSelectProps['optionsListProps'];\n\n    /**\n     * Включает отображение поиска\n     */\n    showSearch?: BaseSelectProps['showSearch'];\n\n    /**\n     *  Настройки поиска\n     */\n    searchProps?: BaseSelectProps['searchProps'];\n\n    /**\n     * Показывать кнопку очистки\n     */\n    showClear?: boolean;\n\n    /**\n     * Показывать пункт \"Выбрать все\"\n     */\n    showSelectAll?: boolean;\n\n    /**\n     * Показывать пункт \"Выбрать все\" в заголовке списка\n     */\n    showHeaderWithSelectAll?: boolean;\n\n    /**\n     * Значение name при применении выбора\n     * @default 'apply-footer'\n     */\n    applyName?: string;\n\n    /**\n     * Значение name при сбросе выбора\n     * @default 'reset-footer'\n     */\n    resetName?: string;\n\n    /**\n     * Позиция чекбокса \"Выбрать все\" в Header\n     * @default 'before'\n     */\n    checkmarkPosition?: 'before' | 'after';\n};\n\nconst selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };\n\nexport function useSelectWithApply({\n    options,\n    selected,\n    onChange = () => null,\n    onSelectAllClick = () => null,\n    OptionsList,\n    optionsListProps = {},\n    showClear = true,\n    showSelectAll = false,\n    showHeaderWithSelectAll = false,\n    checkmarkPosition = 'before',\n    showSearch = false,\n    searchProps = {},\n    applyName = 'apply-footer',\n    resetName = 'reset-footer',\n}: UseSelectWithApplyProps) {\n    const [searchState, setSearchState] = useState('');\n\n    const [search, setSearch] =\n        typeof searchProps?.value === 'string'\n            ? [searchProps.value, searchProps.onChange]\n            : [searchState, setSearchState];\n\n    const accessor = searchProps.accessor || defaultAccessor;\n    const filterFn = searchProps.filterFn || defaultFilterFn;\n    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;\n    const filterGroup = searchProps.filterGroup ?? false;\n\n    const { flatOptions, filteredOptions, selectedOptions } = useMemo(\n        () =>\n            processOptions(\n                options,\n                selected,\n                showSearch\n                    ? (option) => {\n                          if (isGroup(option)) {\n                              const groupAccessorValue = groupAccessor(option);\n\n                              return (\n                                  typeof groupAccessorValue === 'string' &&\n                                  filterFn(groupAccessorValue, search)\n                              );\n                          }\n\n                          return filterFn(accessor(option), search);\n                      }\n                    : undefined,\n                filterGroup,\n            ),\n        [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor],\n    );\n    const [selectedDraft, setSelectedDraft] = useState<OptionShape[]>(selectedOptions);\n\n    const selectedOptionsRef = useRef<OptionShape[]>(selectedOptions);\n\n    const handleApply = () => {\n        onChange({\n            selected: selectedDraft[0],\n            selectedMultiple: selectedDraft,\n            initiator: null,\n            name: applyName,\n        });\n    };\n\n    const handleClear = () => {\n        setSelectedDraft([]);\n        onChange({\n            selected: null,\n            selectedMultiple: [],\n            initiator: null,\n            name: resetName,\n        });\n    };\n\n    const handleToggleAll = () => {\n        const optionsToSet = flatOptions.length === selectedDraft.length ? [] : flatOptions;\n\n        onSelectAllClick(optionsToSet);\n        setSelectedDraft(optionsToSet);\n    };\n\n    const selectedKeys = useMemo(() => selectedDraft.map(({ key }) => key), [selectedDraft]);\n\n    const handleChange: Required<BaseSelectProps>['onChange'] = ({ initiator, ...restArgs }) => {\n        if (!initiator) {\n            onChange({\n                initiator: null,\n                ...restArgs,\n            });\n\n            return;\n        }\n\n        const initiatorSelected =\n            selectedDraft.some(\n                (selectedDraftOption) => selectedDraftOption.key === initiator.key,\n            ) ||\n            (initiator.key === SELECT_ALL_KEY &&\n                (selectedDraft.length === flatOptions.length ||\n                    flatOptions.every(({ key }) => selectedKeys.includes(key))));\n\n        if (initiator.key === SELECT_ALL_KEY) {\n            setSelectedDraft(initiatorSelected ? [] : flatOptions);\n        } else {\n            setSelectedDraft(\n                initiatorSelected\n                    ? selectedDraft.filter((o) => o.key !== initiator.key)\n                    : selectedDraft.concat(initiator),\n            );\n        }\n    };\n\n    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);\n\n    useEffect(() => {\n        // устанавливать selectedDraft если selectedOptions изменились\n        if (!reactFastCompare(selectedOptionsRef.current, selectedOptions)) {\n            setSelectedDraft(selectedOptions);\n        }\n        selectedOptionsRef.current = selectedOptions;\n    }, [selectedOptions]);\n\n    const memoizedOptions = useMemo(\n        () =>\n            filteredOptions.length && showSelectAll\n                ? [selectAllOption, ...filteredOptions]\n                : filteredOptions,\n        [filteredOptions, showSelectAll],\n    );\n\n    return {\n        OptionsList: OptionsListWithApply,\n        optionsListProps: {\n            ...(optionsListProps as AnyObject),\n            OptionsList,\n            showClear,\n            onClear: handleClear,\n            onApply: handleApply,\n            onClose: handleClose,\n            selectedDraft,\n            setSelectedDraft,\n            showHeaderWithSelectAll,\n            headerProps: {\n                ...(optionsListProps as AnyObject)?.headerProps,\n                indeterminate: selectedDraft.length > 0,\n                checked:\n                    selectedDraft.length === flatOptions.length ||\n                    flatOptions.every(({ key }) => selectedKeys.includes(key)),\n                onChange: handleToggleAll,\n                checkmarkPosition,\n            },\n        },\n        multiple: true,\n        options: memoizedOptions,\n        onChange: handleChange,\n        selected,\n        showSearch,\n        searchProps: showSearch\n            ? {\n                  ...searchProps,\n                  value: search,\n                  onChange: setSearch,\n              }\n            : undefined,\n        /* Костыль для респонсив селекта. В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */\n        originalProps: {\n            options,\n            selected,\n            onChange,\n            OptionsList,\n            optionsListProps,\n            showClear,\n            showSelectAll,\n            showHeaderWithSelectAll,\n            checkmarkPosition,\n            showSearch,\n            searchProps,\n            applyName,\n            resetName,\n        },\n    };\n}\n"],"names":[],"mappings":"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"}

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

@@ -12,14 +12,14 @@
 :root {
     --select-option-list-footer-button-gap: var(--gap-8);
 }
-.select__footer_d6idr {
+.select__footer_kaepn {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_d6idr.select__size-72_d6idr {
+.select__footer_kaepn.select__size-72_kaepn {
         padding: var(--gap-12) var(--gap-16);
     }
-.select__footer_d6idr > .select__button_d6idr + .select__button_d6idr {
+.select__footer_kaepn > .select__button_kaepn + .select__button_kaepn {
         margin-left: var(--select-option-list-footer-button-gap);
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"select__footer_d6idr","size-72":"select__size-72_d6idr","button":"select__button_d6idr"};
+const styles = {"footer":"select__footer_kaepn","size-72":"select__size-72_kaepn","button":"select__button_kaepn"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/presets/useSelectWithApply/options-list-with-apply/header/Component.d.ts

@@ -7,6 +7,7 @@ export declare type HeaderProps = {
     onChange?: CheckboxProps['onChange'];
     mobile?: boolean;
     dataTestId?: string;
+    checkmarkPosition?: 'before' | 'after';
     size?: OptionsListProps['size'];
 };
 export declare const Header: React.FC<HeaderProps>;

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

@@ -3,11 +3,11 @@ import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/modern';
 import styles from './index.module.css.js';
 
-const Header = ({ onChange, checked, indeterminate, mobile, dataTestId, size, }) => (React.createElement("div", { className: cn(size && styles[`size-${size}`], {
+const Header = ({ onChange, checked, indeterminate, mobile, dataTestId, size, checkmarkPosition = 'before', }) => (React.createElement("div", { className: cn(size && styles[`size-${size}`], {
         [styles.desktop]: !mobile,
         [styles.mobile]: mobile,
     }) },
-    React.createElement(Checkbox, { block: true, indeterminate: indeterminate, size: 24, onChange: onChange, checked: checked, label: '\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435', dataTestId: dataTestId })));
+    React.createElement(Checkbox, { block: true, indeterminate: indeterminate, size: 24, onChange: onChange, checked: checked, label: '\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435', dataTestId: dataTestId, position: checkmarkPosition, contentClassName: cn({ [styles.positionAfter]: checkmarkPosition === 'after' }) })));
 
 export { Header };
 //# sourceMappingURL=Component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../../../src/presets/useSelectWithApply/options-list-with-apply/header/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\n\nimport { type OptionsListProps } from '../../../../typings';\n\nimport styles from './index.module.css';\n\nexport type HeaderProps = {\n    checked?: boolean;\n    indeterminate?: boolean;\n    onChange?: CheckboxProps['onChange'];\n    mobile?: boolean;\n    dataTestId?: string;\n    size?: OptionsListProps['size'];\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n    onChange,\n    checked,\n    indeterminate,\n    mobile,\n    dataTestId,\n    size,\n}) => (\n    <div\n        className={cn(size && styles[`size-${size}`], {\n            [styles.desktop]: !mobile,\n            [styles.mobile]: mobile,\n        })}\n    >\n        <Checkbox\n            block={true}\n            indeterminate={indeterminate}\n            size={24}\n            onChange={onChange}\n            checked={checked}\n            label='Выбрать все'\n            dataTestId={dataTestId}\n        />\n    </div>\n);\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,MAAM,GAA0B,CAAC,EAC1C,QAAQ,EACR,OAAO,EACP,aAAa,EACb,MAAM,EACN,UAAU,EACV,IAAI,GACP,MACG,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAC,EAAE;AAC1C,QAAA,CAAC,MAAM,CAAC,OAAO,GAAG,CAAC,MAAM;AACzB,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;KAC1B,CAAC,EAAA;AAEF,IAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACL,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,+DAAa,EACnB,UAAU,EAAE,UAAU,EACxB,CAAA,CACA;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../../../src/presets/useSelectWithApply/options-list-with-apply/header/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\n\nimport { type OptionsListProps } from '../../../../typings';\n\nimport styles from './index.module.css';\n\nexport type HeaderProps = {\n    checked?: boolean;\n    indeterminate?: boolean;\n    onChange?: CheckboxProps['onChange'];\n    mobile?: boolean;\n    dataTestId?: string;\n    checkmarkPosition?: 'before' | 'after';\n    size?: OptionsListProps['size'];\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n    onChange,\n    checked,\n    indeterminate,\n    mobile,\n    dataTestId,\n    size,\n    checkmarkPosition = 'before',\n}) => (\n    <div\n        className={cn(size && styles[`size-${size}`], {\n            [styles.desktop]: !mobile,\n            [styles.mobile]: mobile,\n        })}\n    >\n        <Checkbox\n            block={true}\n            indeterminate={indeterminate}\n            size={24}\n            onChange={onChange}\n            checked={checked}\n            label='Выбрать все'\n            dataTestId={dataTestId}\n            position={checkmarkPosition}\n            contentClassName={cn({ [styles.positionAfter]: checkmarkPosition === 'after' })}\n        />\n    </div>\n);\n"],"names":[],"mappings":";;;;;AAmBa,MAAA,MAAM,GAA0B,CAAC,EAC1C,QAAQ,EACR,OAAO,EACP,aAAa,EACb,MAAM,EACN,UAAU,EACV,IAAI,EACJ,iBAAiB,GAAG,QAAQ,GAC/B,MACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,CAAC,QAAQ,IAAI,CAAA,CAAE,CAAC,EAAE;AAC1C,QAAA,CAAC,MAAM,CAAC,OAAO,GAAG,CAAC,MAAM;AACzB,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;KAC1B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,QAAQ,EACL,EAAA,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,+DAAa,EACnB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,gBAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,GAAG,iBAAiB,KAAK,OAAO,EAAE,CAAC,EAAA,CACjF,CACA;;;;"}

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

@@ -6,12 +6,16 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.select__desktop_1h9v5 {
+.select__desktop_1t4z8 {
     padding: var(--gap-12);
 }
-.select__desktop_1h9v5.select__size-72_1h9v5 {
+.select__desktop_1t4z8.select__size-72_1t4z8 {
         padding-left: var(--gap-16);
     }
-.select__mobile_1h9v5 {
-    padding: var(--gap-12) var(--gap-8);
+.select__mobile_1t4z8 {
+    padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
+}
+.select__positionAfter_1t4z8 {
+    margin-left: 0;
+    margin-left: initial;
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"desktop":"select__desktop_1h9v5","size-72":"select__size-72_1h9v5","mobile":"select__mobile_1h9v5"};
+const styles = {"desktop":"select__desktop_1t4z8","size-72":"select__size-72_1t4z8","mobile":"select__mobile_1t4z8","positionAfter":"select__positionAfter_1t4z8"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.desktop {\n    padding: var(--gap-12);\n    &.size-72 {\n        padding-left: var(--gap-16);\n    }\n}\n\n.mobile {\n    padding: var(--gap-12) var(--gap-8);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.desktop {\n    padding: var(--gap-12);\n    &.size-72 {\n        padding-left: var(--gap-16);\n    }\n}\n\n.mobile {\n    padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);\n}\n\n.positionAfter {\n    margin-left: unset;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,eAAe,CAAC,6BAA6B,CAAC;;;;"}

package/modern/presets/useSelectWithLoading/hook.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { Skeleton } from '@alfalab/core-components-skeleton/modern';
 import 'classnames';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-checkbox/modern';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark/index.css';
 import '../../components/option/desktop/index.css';

package/modern/presets/useSelectWithLoading/hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../src/presets/useSelectWithLoading/hook.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Skeleton } from '@alfalab/core-components-skeleton';\n\nimport { Option as DefaultOption } from '../../components/option';\nimport { type BaseSelectProps, type OptionProps, type OptionShape } from '../../typings';\n\nimport styles from './index.module.css';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useSelectWithLoadingProps = {\n    loading?: boolean;\n    visibleOptions?: BaseSelectProps['visibleOptions'];\n    Option?: React.FC<OptionProps>;\n};\n\nexport function useSelectWithLoading({\n    loading = false,\n    visibleOptions = 6,\n    Option = DefaultOption,\n}: useSelectWithLoadingProps) {\n    const renderOption = (props: OptionProps) => (\n        <Option {...props} Checkmark={null} highlighted={loading ? false : props.highlighted} />\n    );\n\n    const options: OptionShape[] = Array(visibleOptions)\n        .fill(0)\n        .map((_, key) => ({\n            key: `loading-${key}`,\n            disabled: true,\n            content: <Skeleton className={styles.skeleton} visible={true} />,\n        }));\n\n    if (!loading) return null;\n\n    return {\n        Option: renderOption,\n        options,\n    };\n}\n"],"names":["DefaultOption"],"mappings":";;;;;;;;;;;;;;AAgBgB,SAAA,oBAAoB,CAAC,EACjC,OAAO,GAAG,KAAK,EACf,cAAc,GAAG,CAAC,EAClB,MAAM,GAAGA,gBAAa,GACE,EAAA;AACxB,IAAA,MAAM,YAAY,GAAG,CAAC,KAAkB,MACpC,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,WAAW,EAAA,CAAI,CAC3F;AAED,IAAA,MAAM,OAAO,GAAkB,KAAK,CAAC,cAAc;SAC9C,IAAI,CAAC,CAAC;SACN,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM;QACd,GAAG,EAAE,CAAW,QAAA,EAAA,GAAG,CAAE,CAAA;AACrB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,OAAO,EAAE,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;AACnE,KAAA,CAAC,CAAC;AAEP,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;IAEzB,OAAO;AACH,QAAA,MAAM,EAAE,YAAY;QACpB,OAAO;KACV;AACL;;;;"}
+{"version":3,"file":"hook.js","sources":["../../../src/presets/useSelectWithLoading/hook.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Skeleton } from '@alfalab/core-components-skeleton';\n\nimport { Option as DefaultOption } from '../../components/option';\nimport { type BaseSelectProps, type OptionProps, type OptionShape } from '../../typings';\n\nimport styles from './index.module.css';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useSelectWithLoadingProps = {\n    loading?: boolean;\n    visibleOptions?: BaseSelectProps['visibleOptions'];\n    Option?: React.FC<OptionProps>;\n};\n\nexport function useSelectWithLoading({\n    loading = false,\n    visibleOptions = 6,\n    Option = DefaultOption,\n}: useSelectWithLoadingProps) {\n    const renderOption = (props: OptionProps) => (\n        <Option {...props} Checkmark={null} highlighted={loading ? false : props.highlighted} />\n    );\n\n    const options: OptionShape[] = Array(visibleOptions)\n        .fill(0)\n        .map((_, key) => ({\n            key: `loading-${key}`,\n            disabled: true,\n            content: <Skeleton className={styles.skeleton} visible={true} />,\n        }));\n\n    if (!loading) return null;\n\n    return {\n        Option: renderOption,\n        options,\n    };\n}\n"],"names":["DefaultOption"],"mappings":";;;;;;;;;;;;AAgBgB,SAAA,oBAAoB,CAAC,EACjC,OAAO,GAAG,KAAK,EACf,cAAc,GAAG,CAAC,EAClB,MAAM,GAAGA,gBAAa,GACE,EAAA;AACxB,IAAA,MAAM,YAAY,GAAG,CAAC,KAAkB,MACpC,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,WAAW,EAAA,CAAI,CAC3F;AAED,IAAA,MAAM,OAAO,GAAkB,KAAK,CAAC,cAAc;SAC9C,IAAI,CAAC,CAAC;SACN,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM;QACd,GAAG,EAAE,CAAW,QAAA,EAAA,GAAG,CAAE,CAAA;AACrB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,OAAO,EAAE,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;AACnE,KAAA,CAAC,CAAC;AAEP,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;IAEzB,OAAO;AACH,QAAA,MAAM,EAAE,YAAY;QACpB,OAAO;KACV;AACL;;;;"}

package/modern/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_1s7nq {
+.select__skeleton_az3hq {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/modern/presets/useSelectWithLoading/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"skeleton":"select__skeleton_1s7nq"};
+const styles = {"skeleton":"select__skeleton_az3hq"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/typings.d.ts

@@ -669,6 +669,10 @@ export declare type CheckmarkProps = {
      * Расположение отметки
      */
     position?: 'before' | 'after';
+    /**
+     * Дополнительный контент
+     */
+    content?: ReactNode;
     /**
      * Иконка выбранного пункта
      */
@@ -697,6 +701,11 @@ export declare type AdditionalMobileProps = {
      * Использовать ли хук useSelectWithApply в мобильном компоненте
      */
     useWithApplyHook?: boolean;
+    /**
+     * Позиция чекбокса "Выбрать все" в Header
+     * @default 'before'
+     */
+    checkmarkPosition?: 'before' | 'after';
 };
 export declare type BottomSheetSelectMobileProps = {
     /**

package/moderncssm/components/base-checkmark/Component.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { type FC } from 'react';
 import { type CheckmarkProps } from '../../typings';
-export declare const BaseCheckmark: ({ selected, disabled, className, multiple, align, }: CheckmarkProps) => React.JSX.Element;
+export declare const BaseCheckmark: FC<CheckmarkProps>;

package/moderncssm/components/base-checkmark/Component.js

@@ -4,12 +4,16 @@ import { Checkbox } from '@alfalab/core-components-checkbox/moderncssm';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const BaseCheckmark = ({ selected, disabled = false, className, multiple, align = 'center', }) => {
-    const checkmarkClassNames = cn(styles.checkmark, styles[align], className, {
-        [styles.single]: !multiple,
-        [styles.selected]: selected,
-    });
-    return multiple ? (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 24, hiddenInput: true })) : (React.createElement(CheckmarkMIcon, { className: checkmarkClassNames }));
+const BaseCheckmark = ({ selected, disabled = false, className, multiple, align = 'center', position = 'before', content, }) => {
+    const renderCheckmarkIcon = () => (React.createElement(CheckmarkMIcon, { className: cn(styles.singleIcon, styles[position], {
+            [styles.selected]: selected,
+        }) }));
+    return multiple ? (React.createElement(Checkbox, { block: true, checked: selected, disabled: disabled, contentClassName: cn({ [styles.positionAfter]: position === 'after' }), className: cn(styles.checkmark, styles[align], className, {
+            [styles.selected]: selected,
+        }), size: 24, position: position, label: content, hiddenInput: true })) : (React.createElement("div", { className: cn(styles.container, styles[align], className) },
+        position === 'before' && renderCheckmarkIcon(),
+        React.createElement("div", { className: styles.content }, content),
+        position === 'after' && renderCheckmarkIcon()));
 };
 
 export { BaseCheckmark };

package/moderncssm/components/base-checkmark/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-checkmark/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox } from '@alfalab/core-components-checkbox';\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const BaseCheckmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    align = 'center',\n}: CheckmarkProps) => {\n    const checkmarkClassNames = cn(styles.checkmark, styles[align], className, {\n        [styles.single]: !multiple,\n        [styles.selected]: selected,\n    });\n\n    return multiple ? (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            hiddenInput={true}\n        />\n    ) : (\n        <CheckmarkMIcon className={checkmarkClassNames} />\n    );\n};\n"],"names":[],"mappings":";;;;;;MAUa,aAAa,GAAG,CAAC,EAC1B,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,GACH,KAAI;AACjB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACvE,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,QAAQ;AAC1B,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,OAAO,QAAQ,IACX,KAAA,CAAA,aAAA,CAAC,QAAQ,EACL,EAAA,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,WAAW,EAAE,IAAI,EAAA,CACnB,KAEF,KAAA,CAAA,aAAA,CAAC,cAAc,EAAC,EAAA,SAAS,EAAE,mBAAmB,EAAA,CAAI,CACrD;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-checkmark/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox } from '@alfalab/core-components-checkbox';\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const BaseCheckmark: FC<CheckmarkProps> = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    align = 'center',\n    position = 'before',\n    content,\n}) => {\n    const renderCheckmarkIcon = () => (\n        <CheckmarkMIcon\n            className={cn(styles.singleIcon, styles[position], {\n                [styles.selected]: selected,\n            })}\n        />\n    );\n\n    return multiple ? (\n        <Checkbox\n            block={true}\n            checked={selected}\n            disabled={disabled}\n            contentClassName={cn({ [styles.positionAfter]: position === 'after' })}\n            className={cn(styles.checkmark, styles[align], className, {\n                [styles.selected]: selected,\n            })}\n            size={24}\n            position={position}\n            label={content}\n            hiddenInput={true}\n        />\n    ) : (\n        <div className={cn(styles.container, styles[align], className)}>\n            {position === 'before' && renderCheckmarkIcon()}\n\n            <div className={styles.content}>{content}</div>\n\n            {position === 'after' && renderCheckmarkIcon()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAUa,MAAA,aAAa,GAAuB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,QAAQ,EACnB,OAAO,GACV,KAAI;IACD,MAAM,mBAAmB,GAAG,OACxB,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC/C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;SAC9B,CAAC,EAAA,CACJ,CACL;IAED,OAAO,QAAQ,IACX,KAAC,CAAA,aAAA,CAAA,QAAQ,EACL,EAAA,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ,KAAK,OAAO,EAAE,CAAC,EACtE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACtD,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,EACF,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,IAAI,EACnB,CAAA,KAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAA;AACzD,QAAA,QAAQ,KAAK,QAAQ,IAAI,mBAAmB,EAAE;AAE/C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,OAAO,CAAO;AAE9C,QAAA,QAAQ,KAAK,OAAO,IAAI,mBAAmB,EAAE,CAC5C,CACT;AACL;;;;"}

package/moderncssm/components/base-checkmark/index.module.css

@@ -11,13 +11,43 @@
         align-self: center;
     }
 
-.single {
+.positionAfter {
+    margin-left: 0;
+    margin-left: initial;
+}
+
+.container {
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+}
+
+.container.start {
+        align-items: flex-start;
+    }
+
+.container.center {
+        align-items: center;
+    }
+
+.singleIcon {
+    flex-shrink: 0;
     opacity: 0;
 }
 
-.single.selected {
+.singleIcon.before {
+        margin-right: var(--gap-12);
+    }
+
+.singleIcon.after {
+        margin-left: var(--gap-12);
+    }
+
+.singleIcon.selected {
         opacity: 1;
     }
+
+.content {
+    flex: 1;
+}

package/moderncssm/components/base-option/Component.js

@@ -7,27 +7,16 @@ const BaseOption = ({ className, option, children, selected, highlighted, disabl
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
     const isTextContent = !isValidElement(content);
-    const renderCheckmark = () => {
-        if (Checkmark && showCheckMark) {
-            return (React.createElement(Checkmark, { className: cn({
-                    [styles.checkmarkBeforeContent]: checkmarkPosition === 'before',
-                    [styles.checkmarkAfterContent]: checkmarkPosition === 'after',
-                }), disabled: disabled, selected: selected, multiple: multiple, align: align }));
-        }
-        return null;
-    };
+    const showCheckmark = Checkmark && showCheckMark;
     return (React.createElement("div", { ...innerProps, className: cn(styles.option, size && styles[`size-${size}`], className, {
             [styles.highlighted]: !mobile && highlighted,
             [styles.selected]: selected,
             [styles.disabled]: disabled,
             [styles.textContent]: isTextContent,
             [styles.mobile]: mobile,
-            [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',
-            [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',
-        }), "data-test-id": dataTestId, "aria-label": option?.value?.name },
-        checkmarkPosition === 'before' && renderCheckmark(),
-        React.createElement("div", { className: cn(styles.content) }, content),
-        checkmarkPosition === 'after' && renderCheckmark()));
+            [styles.checkmarkAfter]: showCheckmark && !isTextContent && checkmarkPosition === 'after',
+            [styles.checkmarkBefore]: showCheckmark && !isTextContent && checkmarkPosition === 'before',
+        }), "data-test-id": dataTestId, "aria-label": option?.value?.name }, showCheckmark ? (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, align: align, position: checkmarkPosition, content: content })) : (React.createElement("div", { className: cn(styles.content) }, content))));
 };
 
 export { BaseOption };

package/moderncssm/components/base-option/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionProps } from '../../typings';\nimport { BaseCheckmark } from '../base-checkmark';\n\nimport styles from './index.module.css';\n\nexport const BaseOption: FC<OptionProps> = ({\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    Checkmark = BaseCheckmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    align = 'center',\n    innerProps,\n    dataTestId,\n    mobile = false,\n    size,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    const isTextContent = !isValidElement(content);\n\n    const renderCheckmark = () => {\n        if (Checkmark && showCheckMark) {\n            return (\n                <Checkmark\n                    className={cn({\n                        [styles.checkmarkBeforeContent]: checkmarkPosition === 'before',\n                        [styles.checkmarkAfterContent]: checkmarkPosition === 'after',\n                    })}\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    align={align}\n                />\n            );\n        }\n\n        return null;\n    };\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, size && styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n                [styles.textContent]: isTextContent,\n                [styles.mobile]: mobile,\n                [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',\n                [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',\n            })}\n            data-test-id={dataTestId}\n            aria-label={option?.value?.name}\n        >\n            {checkmarkPosition === 'before' && renderCheckmark()}\n\n            <div className={cn(styles.content)}>{content}</div>\n\n            {checkmarkPosition === 'after' && renderCheckmark()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;MAQa,UAAU,GAAoB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,aAAa,EACzB,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,UAAU,EACV,MAAM,GAAG,KAAK,EACd,IAAI,GACP,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AAEvC,IAAA,MAAM,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;IAE9C,MAAM,eAAe,GAAG,MAAK;QACzB,IAAI,SAAS,IAAI,aAAa,EAAE;AAC5B,YAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,SAAS,EAAE,EAAE,CAAC;AACV,oBAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,iBAAiB,KAAK,QAAQ;AAC/D,oBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,iBAAiB,KAAK,OAAO;AAChE,iBAAA,CAAC,EACF,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EAAA,CACd;AAET;AAED,QAAA,OAAO,IAAI;AACf,KAAC;IAED,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,EAAE;YACpE,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;YACvB,CAAC,MAAM,CAAC,cAAc,GAAG,CAAC,aAAa,IAAI,iBAAiB,KAAK,OAAO;YACxE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,aAAa,IAAI,iBAAiB,KAAK,QAAQ;AAC7E,SAAA,CAAC,kBACY,UAAU,EAAA,YAAA,EACZ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAA;AAE9B,QAAA,iBAAiB,KAAK,QAAQ,IAAI,eAAe,EAAE;QAEpD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAG,EAAA,OAAO,CAAO;AAElD,QAAA,iBAAiB,KAAK,OAAO,IAAI,eAAe,EAAE,CACjD;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionProps } from '../../typings';\nimport { BaseCheckmark } from '../base-checkmark';\n\nimport styles from './index.module.css';\n\nexport const BaseOption: FC<OptionProps> = ({\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    Checkmark = BaseCheckmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    align = 'center',\n    innerProps,\n    dataTestId,\n    mobile = false,\n    size,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n    const isTextContent = !isValidElement(content);\n    const showCheckmark = Checkmark && showCheckMark;\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, size && styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n                [styles.textContent]: isTextContent,\n                [styles.mobile]: mobile,\n                [styles.checkmarkAfter]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'after',\n                [styles.checkmarkBefore]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'before',\n            })}\n            data-test-id={dataTestId}\n            aria-label={option?.value?.name}\n        >\n            {showCheckmark ? (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    align={align}\n                    position={checkmarkPosition}\n                    content={content}\n                />\n            ) : (\n                <div className={cn(styles.content)}>{content}</div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;MAQa,UAAU,GAAoB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,aAAa,EACzB,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,UAAU,EACV,MAAM,GAAG,KAAK,EACd,IAAI,GACP,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AACvC,IAAA,MAAM,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,SAAS,IAAI,aAAa;IAEhD,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,EAAE;YACpE,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,cAAc,GAClB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,OAAO;AACpE,YAAA,CAAC,MAAM,CAAC,eAAe,GACnB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,QAAQ;AACxE,SAAA,CAAC,EACY,cAAA,EAAA,UAAU,EACZ,YAAA,EAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAE9B,EAAA,aAAa,IACV,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAClB,CAAA,KAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAA,EAAG,OAAO,CAAO,CACtD,CACC;AAEd;;;;"}

package/moderncssm/components/base-option/index.module.css

@@ -15,7 +15,8 @@
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     display: flex;
     align-items: center;
@@ -83,14 +84,6 @@
     color: var(--select-option-disabled-color);
 }
 
-.checkmarkBeforeContent {
-    margin-right: var(--gap-12);
-}
-
-.checkmarkAfterContent {
-    margin-left: var(--gap-12);
-}
-
 .content {
     flex: 1;
 }

package/moderncssm/components/checkmark/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type CheckmarkProps } from '../../typings';
-export declare const Checkmark: ({ selected, disabled, className, multiple, position, }: CheckmarkProps) => React.JSX.Element;
+export declare const Checkmark: ({ selected, disabled, className, multiple, position, content, }: CheckmarkProps) => React.JSX.Element;

package/moderncssm/components/checkmark/Component.js

@@ -1,12 +1,10 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
-import { Badge } from '@alfalab/core-components-badge/moderncssm';
 import { Checkbox } from '@alfalab/core-components-checkbox/moderncssm';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', }) => {
+const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', content, }) => {
     const single = !multiple;
     const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {
         [styles.multiple]: !single,
@@ -14,7 +12,8 @@ const Checkmark = ({ selected, disabled = false, className, multiple, position =
         [styles.selected]: selected,
     });
     const handleCheckboxClick = useCallback((event) => event.stopPropagation(), []);
-    return single ? (React.createElement("div", { className: checkmarkClassNames }, position === 'before' ? (React.createElement(Badge, { className: styles.after, view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.colorIcon }) })) : (React.createElement(CheckmarkMIcon, { className: cn(styles.displayIcon) })))) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 24, onClick: handleCheckboxClick }));
+    return single ? (React.createElement("div", { className: checkmarkClassNames },
+        React.createElement(CheckmarkMIcon, { className: cn(styles.displayIcon) }))) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 24, label: content, onClick: handleCheckboxClick }));
 };
 
 export { Checkmark };

package/moderncssm/components/checkmark/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark/Component.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    position = 'before',\n}: CheckmarkProps) => {\n    const single = !multiple;\n\n    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {\n        [styles.multiple]: !single,\n        [styles.single]: single,\n        [styles.selected]: selected,\n    });\n\n    const handleCheckboxClick = useCallback<Required<CheckboxProps>['onClick']>(\n        (event) => event.stopPropagation(),\n        [],\n    );\n\n    return single ? (\n        <div className={checkmarkClassNames}>\n            {position === 'before' ? (\n                <Badge\n                    className={styles.after}\n                    view='icon'\n                    size='m'\n                    iconColor='positive'\n                    content={<CheckmarkCircleMIcon className={styles.colorIcon} />}\n                />\n            ) : (\n                <CheckmarkMIcon className={cn(styles.displayIcon)} />\n            )}\n        </div>\n    ) : (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            onClick={handleCheckboxClick}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAYa,SAAS,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,GACN,KAAI;AACjB,IAAA,MAAM,MAAM,GAAG,CAAC,QAAQ;AAExB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1E,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM;AAC1B,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAClC,EAAE,CACL;IAED,OAAO,MAAM,IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,mBAAmB,EAAA,EAC9B,QAAQ,KAAK,QAAQ,IAClB,KAAC,CAAA,aAAA,CAAA,KAAK,EACF,EAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,KAAC,CAAA,aAAA,CAAA,oBAAoB,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,CAAI,GAChE,KAEF,oBAAC,cAAc,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,EAAA,CAAI,CACxD,CACC,KAEN,oBAAC,QAAQ,EAAA,EACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,mBAAmB,EAC9B,CAAA,CACL;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark/Component.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\nimport CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    position = 'before',\n    content,\n}: CheckmarkProps) => {\n    const single = !multiple;\n\n    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {\n        [styles.multiple]: !single,\n        [styles.single]: single,\n        [styles.selected]: selected,\n    });\n\n    const handleCheckboxClick = useCallback<Required<CheckboxProps>['onClick']>(\n        (event) => event.stopPropagation(),\n        [],\n    );\n\n    return single ? (\n        <div className={checkmarkClassNames}>\n            <CheckmarkMIcon className={cn(styles.displayIcon)} />\n        </div>\n    ) : (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            label={content}\n            onClick={handleCheckboxClick}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;MAUa,SAAS,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,OAAO,GACM,KAAI;AACjB,IAAA,MAAM,MAAM,GAAG,CAAC,QAAQ;AAExB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1E,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM;AAC1B,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAClC,EAAE,CACL;IAED,OAAO,MAAM,IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,mBAAmB,EAAA;QAC/B,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,GAAI,CACnD,KAEN,KAAC,CAAA,aAAA,CAAA,QAAQ,IACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,mBAAmB,EAC9B,CAAA,CACL;AACL;;;;"}

package/moderncssm/components/checkmark/index.module.css

@@ -1,24 +1,22 @@
 :root {
-
-    --select-checkmark-margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-0);
-    --select-checkmark-margin-after: var(--select-checkmark-margin);
-    --select-checkmark-size: 4px;
-    --select-checkmark-before-display: 'flex';
+    --select-checkmark-size: 24px;
+    --select-checkmark-before-display: flex;
     --select-checkmark-after-display: none;
     --select-checkmark-before-display-multiple: block;
-    --select-checkmark-after-display-single: none;
+    --select-checkmark-after-display-single: flex;
     --select-checkmark-unselected-opacity: 0;
-    --select-checkmark-background: var(--color-light-neutral-translucent-1300);
-    --select-checkmark-border-radius: var(--border-radius-circle);
 }
 
 .checkmark {
     flex-shrink: 0;
-    margin: var(--select-checkmark-margin);
 }
 
+.checkmark.before {
+        display: var(--select-checkmark-before-display);
+    }
+
 .checkmark.after {
-        margin: var(--select-checkmark-margin-after);
+        display: var(--select-checkmark-after-display);
     }
 
 .single {
@@ -26,9 +24,6 @@
     align-items: center;
     justify-content: center;
     opacity: var(--select-checkmark-unselected-opacity);
-    background: var(--select-checkmark-background);
-    background-size: cover;
-    border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size);
 }
@@ -37,15 +32,15 @@
         opacity: 1;
     }
 
-.before {
-    display: var(--select-checkmark-before-display);
-}
-
-.before.multiple {
+.multiple.before {
         margin-right: var(--gap-12);
         display: var(--select-checkmark-before-display-multiple);
     }
 
+.multiple.after {
+        margin-left: var(--gap-12);
+    }
+
 .after.after {
     display: var(--select-checkmark-after-display);
 }
@@ -57,3 +52,9 @@
 .colorIcon {
     color: var(--color-light-status-positive);
 }
+
+.displayIcon {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

package/moderncssm/components/checkmark-mobile/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type CheckmarkProps } from '../../typings';
-export declare const Checkmark: ({ selected, className }: CheckmarkProps) => React.JSX.Element;
+export declare const Checkmark: ({ selected, className, position }: CheckmarkProps) => React.JSX.Element;

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {
+const Checkmark = ({ selected, className, position = 'after' }) => (React.createElement("div", { className: cn(styles.checkmark, className, styles[position], {
         [styles.selected]: selected,
     }) },
     React.createElement(CheckmarkMIcon, { className: styles.displayIcon })));

package/moderncssm/components/checkmark-mobile/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark-mobile/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({ selected, className }: CheckmarkProps) => (\n    <div\n        className={cn(styles.checkmark, className, {\n            [styles.selected]: selected,\n        })}\n    >\n        <CheckmarkMIcon className={styles.displayIcon} />\n    </div>\n);\n"],"names":[],"mappings":";;;;;AASa,MAAA,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAkB,MAC7D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CAC/C;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark-mobile/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({ selected, className, position = 'after' }: CheckmarkProps) => (\n    <div\n        className={cn(styles.checkmark, className, styles[position], {\n            [styles.selected]: selected,\n        })}\n    >\n        <CheckmarkMIcon className={styles.displayIcon} />\n    </div>\n);\n"],"names":[],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,OAAO,EAAkB,MACjF,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AACzD,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CAC/C;;;;"}