@astral/ui 4.0.0-alpha.28 → 4.0.0-alpha.29

package/components/TreeLikeAutocomplete/Input/styles.d.ts

@@ -9,30 +9,6 @@ export declare const EndAdornmentWrapper: import("@emotion/styled").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledIconButton: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "outlined" | "text" | "contained" | "light" | undefined;
-    loading?: boolean | undefined;
-    color?: "grey" | "primary" | "error" | "warning" | "success" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledCircleErrorFillSm: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"action" | "inherit" | "info" | "primary" | "secondary" | "error" | "warning" | "success" | "disabled", import("@mui/material").SvgIconPropsColorOverrides> | undefined;
-    fontSize?: import("@mui/types").OverridableStringUnion<"small" | "inherit" | "medium" | "large", import("@mui/material").SvgIconPropsSizeOverrides> | undefined;
-    htmlColor?: string | undefined;
-    inheritViewBox?: boolean | undefined;
-    shapeRendering?: string | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    titleAccess?: string | undefined;
-    viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "color" | "fontSize" | "shapeRendering" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+export declare const StyledLoader: import("@emotion/styled").StyledComponent<import("../../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/TreeLikeAutocomplete/Input/styles.js

@@ -1,6 +1,5 @@
 import { inputBaseClasses } from '@mui/material';
-import { CircleErrorFillSm } from '../../../icons';
-import { IconButton } from '../../IconButton';
+import { Loader } from '../../Loader';
 import { css, styled } from '../../styles';
 import { TagsList } from '../../TagsList';
 import { TextField } from '../../TextField';
@@ -14,9 +13,8 @@ const hiddenInputClass = css `
 export const StyledTextField = styled(TextField, {
     shouldForwardProp: (prop) => !['$isHidden'].includes(prop),
 }) `
-  min-width: 400px;
-
   .${inputBaseClasses.root} {
+    height: 40px;
     padding-top: ${({ theme }) => theme.spacing(1)};
     padding-bottom: ${({ theme }) => theme.spacing(1)};
   }
@@ -35,24 +33,13 @@ export const StyledTagsList = styled(TagsList) `
 `;
 export const EndAdornmentWrapper = styled.div `
   display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
   align-items: center;
 
   margin-left: auto;
+  padding-left: ${({ theme }) => theme.spacing(1)};
 `;
-export const StyledIconButton = styled(IconButton) `
-  background-color: transparent;
-
-  &:hover {
-    background-color: transparent;
-
-    svg {
-      fill: ${({ theme }) => theme.palette.grey['700']};
-    }
-  }
-`;
-export const StyledCircleErrorFillSm = styled(CircleErrorFillSm) `
-  width: 16px;
-  height: 16px;
-
-  fill: ${({ theme }) => theme.palette.grey['500']};
+export const StyledLoader = styled(Loader) `
+  width: 20px;
+  height: 20px;
 `;

package/components/TreeLikeAutocomplete/OptionsModal/ErrorMessage/ErrorMessage.js

@@ -3,4 +3,4 @@ import { Button } from '../../../Button';
 import { Typography } from '../../../Typography';
 import { Wrapper } from './styles';
 const DEFAULT_ERROR_MSG = 'Не удалось загрузить данные';
-export const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => (_jsxs(Wrapper, { children: [_jsx(Typography, { color: "textSecondary", children: loadingErrorMsg }), onRetry && _jsx(Button, { onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })] }));
+export const ErrorMessage = ({ loadingErrorMsg = DEFAULT_ERROR_MSG, onRetry, }) => (_jsxs(Wrapper, { children: [_jsx(Typography, { color: "grey", children: loadingErrorMsg }), onRetry && (_jsx(Button, { onClick: onRetry, variant: "light", color: "grey", children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" }))] }));

package/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
 import { Dialog } from '../../Dialog';
 import { DialogActions } from '../../DialogActions';
+import { ScrollWrapper } from '../../ScrollWrapper';
 import { SearchField } from '../../SearchField';
 import { TreeLikeList } from '../../TreeLikeList';
 import { ErrorMessage } from './ErrorMessage';
@@ -35,5 +36,5 @@ export const OptionsModal = (props) => {
         }
         return (_jsx(TreeLikeList, Object.assign({ isConfirmChildrenSelection: isConfirmChildrenSelection }, treeProps, treeLikeListProps)));
     };
-    return (_jsxs(Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), _jsx(TreeListWrapper, { children: renderComponent() })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), _jsx(Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
+    return (_jsxs(Dialog, Object.assign({}, externalDialogProps, { disableRestoreFocus: true, open: isOpen }, modalProps, { children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, Object.assign({ fullWidth: true }, searchFieldProps)), _jsx(ScrollWrapper, { children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ variant: "text" }, cancelButtonProps, { children: "\u041E\u0442\u043C\u0435\u043D\u0430" })), _jsx(Button, Object.assign({}, confirmButtonProps, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" }))] })] })));
 };

package/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -4,7 +4,7 @@ export const StyledDialogContent = styled(DialogContent) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
-  gap: ${({ theme }) => theme.spacing(5)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   width: 100%;
   height: 500px;
@@ -13,9 +13,5 @@ export const TreeListWrapper = styled.div `
   overflow: auto;
 
   min-width: 500px;
-  padding: ${({ theme }) => theme.spacing(2, 0)};
-
-  background-color: ${({ theme }) => theme.palette.background.element};
-  border: 2px solid ${({ theme }) => theme.palette.grey[300]};
-  border-radius: 3px;
+  height: 100%;
 `;

package/components/TreeLikeAutocomplete/TreeLikeAutocomplete.d.ts

@@ -1,64 +1,3 @@
 /// <reference types="react" />
-import { type DialogProps } from '../Dialog';
-import { type TextFieldProps } from '../TextField';
-import { type TreeListData, type TreeListProps } from '../Tree';
-import type { TreeLikeAutocompleteValue, TreeLikeListAutocompleteData } from './types';
-export type TreeLikeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;
-export type TreeLikeAutocompleteProps = {
-    /**
-     * Выбранное значения
-     */
-    value?: TreeLikeAutocompleteValue;
-    /**
-     * Опции, которые необходимо отобразить в виде дерева.
-     */
-    options: TreeLikeListAutocompleteData[];
-    /**
-     * Если true, при выборе родителя будет возможность выбора дочерних элементов
-     * @default true
-     */
-    isConfirmChildrenSelection?: boolean;
-    /**
-     * Если true, поля будут недоступны для взаимодействия
-     */
-    isDisabled?: boolean;
-    /**
-     * Если true, поля будут подсвечены, как содержащие ошибку
-     */
-    isError?: boolean;
-    /**
-     * Флаг загрузки options
-     * Если true, вместо дерева options будет отображен лоадер
-     */
-    isLoading?: boolean;
-    /**
-     * Флаг ошибки загрузки options
-     * Если true, вместо дерева options будет отображен плейсхолдер с ошибкой
-     */
-    isLoadingError?: boolean;
-    /**
-     * Текст ошибки при загрузке данных
-     */
-    loadingErrorMsg?: string;
-    /**
-     * Предназначен для конфигурации всплывающего окна
-     */
-    dialogProps: Omit<DialogProps, 'open' | 'onClose'>;
-    /**
-     * Предназначен для конфигурации дерева опций
-     */
-    treeProps?: TreeLikeAutocompleteTreeProps;
-    /**
-     * Функция обработки нажатия на кнопку "Повторить запрос"
-     */
-    onRetry?: () => void;
-    /**
-     * Функция для поиска элементов по дереву, если не определено, то будет использован встроенный поиск
-     */
-    filterOptions?: (node: TreeListData, searchValue: string) => boolean;
-    /**
-     * Функция, которая запускается при выборе item
-     */
-    onChange?: (newValue: TreeLikeAutocompleteValue | undefined) => void;
-} & Omit<TextFieldProps, 'autoComplete' | 'defaultValue' | 'select' | 'error' | 'disabled' | 'multiline' | 'rows' | 'maxRows' | 'minRows' | 'SelectProps' | 'endAdornment' | 'onChange'>;
+import type { TreeLikeAutocompleteProps } from './types';
 export declare const TreeLikeAutocomplete: import("react").ForwardRefExoticComponent<Omit<TreeLikeAutocompleteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/TreeLikeAutocomplete/types.d.ts

@@ -1,4 +1,6 @@
-import { type TreeListData } from '../Tree';
+import type { DialogProps } from '../Dialog';
+import type { TextFieldProps } from '../TextField';
+import { type TreeListData, type TreeListProps } from '../Tree';
 export type TreeLikeAutocompleteValue = string[];
 export type TreeLikeListAutocompleteData = Omit<TreeListData, 'label' | 'children'> & {
     /**
@@ -10,3 +12,61 @@ export type TreeLikeListAutocompleteData = Omit<TreeListData, 'label' | 'childre
      */
     children?: TreeLikeListAutocompleteData[];
 };
+export type TreeLikeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;
+export type TreeLikeAutocompleteProps = {
+    /**
+     * Выбранное значения
+     */
+    value?: TreeLikeAutocompleteValue;
+    /**
+     * Опции, которые необходимо отобразить в виде дерева.
+     */
+    options: TreeLikeListAutocompleteData[];
+    /**
+     * Если true, при выборе родителя будет возможность выбора дочерних элементов
+     * @default true
+     */
+    isConfirmChildrenSelection?: boolean;
+    /**
+     * Если true, поля будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если true, поля будут подсвечены, как содержащие ошибку
+     */
+    isError?: boolean;
+    /**
+     * Флаг загрузки options
+     * Если true, вместо дерева options будет отображен лоадер
+     */
+    isLoading?: boolean;
+    /**
+     * Флаг ошибки загрузки options
+     * Если true, вместо дерева options будет отображен плейсхолдер с ошибкой
+     */
+    isLoadingError?: boolean;
+    /**
+     * Текст ошибки при загрузке данных
+     */
+    loadingErrorMsg?: string;
+    /**
+     * Предназначен для конфигурации всплывающего окна
+     */
+    dialogProps: Omit<DialogProps, 'open' | 'onClose'>;
+    /**
+     * Предназначен для конфигурации дерева опций
+     */
+    treeProps?: TreeLikeAutocompleteTreeProps;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить запрос"
+     */
+    onRetry?: () => void;
+    /**
+     * Функция для поиска элементов по дереву, если не определено, то будет использован встроенный поиск
+     */
+    filterOptions?: (node: TreeListData, searchValue: string) => boolean;
+    /**
+     * Функция, которая запускается при выборе item
+     */
+    onChange?: (newValue: TreeLikeAutocompleteValue | undefined) => void;
+} & Omit<TextFieldProps, 'autoComplete' | 'defaultValue' | 'select' | 'error' | 'disabled' | 'multiline' | 'rows' | 'maxRows' | 'minRows' | 'SelectProps' | 'endAdornment' | 'onChange'>;

package/components/TreeLikeAutocomplete/useLogic/useLogic.d.ts

@@ -1,9 +1,9 @@
 import { type FocusEvent, type KeyboardEvent, type SyntheticEvent } from 'react';
-import { type TreeLikeAutocompleteProps } from '../TreeLikeAutocomplete';
+import type { TreeLikeAutocompleteProps } from '../types';
 type UseLogicProps = TreeLikeAutocompleteProps;
 export declare const useLogic: ({ value, options, onBlur }: UseLogicProps) => {
     inputProps: {
-        valueToRender: import("..").TreeLikeListAutocompleteData[] | undefined;
+        valueToRender: import("../types").TreeLikeListAutocompleteData[] | undefined;
         onBlur: (event: FocusEvent<HTMLInputElement>) => void;
         onClick: () => void;
         onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;

package/node/components/Checkbox/Checkbox.js

@@ -9,5 +9,5 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
     const { onChange, color, isChecked, indeterminate, isError, disabled, restProps, className, role, style, name, inputRef, value, id, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, Object.assign({ role: role, "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, "$isIndeterminate": indeterminate, className: className, style: style, ref: ref }, restProps, { children: [(0, jsx_runtime_1.jsx)(styles_1.Input, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : isChecked, "aria-disabled": disabled, name: name, ref: inputRef, value: value, id: id }), (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.checkboxClassnames.iconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: constants_1.checkboxClassnames.icon, color: color }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, Object.assign({ role: role, "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, "$isIndeterminate": indeterminate, className: className, style: style, ref: ref }, restProps, { children: [(0, jsx_runtime_1.jsx)(styles_1.Input, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : isChecked, "aria-disabled": disabled, name: name, ref: inputRef, value: value, id: id, className: constants_1.checkboxClassnames.input }), (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.checkboxClassnames.iconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: constants_1.checkboxClassnames.icon, color: color }) })] })));
 });

package/node/components/Checkbox/constants.d.ts

@@ -9,4 +9,7 @@ export declare const checkboxClassnames: {
     symbol: string;
     iconChecked: string;
     iconIndeterminate: string;
+    input: string;
 };
+export declare const CHECKBOX_SIZE = "32px";
+export declare const MOBILE_CHECKBOX_SIZE = "40px";

package/node/components/Checkbox/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxClassnames = void 0;
+exports.MOBILE_CHECKBOX_SIZE = exports.CHECKBOX_SIZE = exports.checkboxClassnames = void 0;
 const utils_1 = require("../utils");
 exports.checkboxClassnames = {
     root: (0, utils_1.createUIKitClassname)('checkbox'),
@@ -13,4 +13,7 @@ exports.checkboxClassnames = {
     symbol: (0, utils_1.createUIKitClassname)('checkbox__symbol'),
     iconChecked: (0, utils_1.createUIKitClassname)('checkbox__icon_checked'),
     iconIndeterminate: (0, utils_1.createUIKitClassname)('checkbox__icon_indeterminate'),
+    input: (0, utils_1.createUIKitClassname)('checkbox__input'),
 };
+exports.CHECKBOX_SIZE = '32px';
+exports.MOBILE_CHECKBOX_SIZE = '40px';

package/node/components/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Checkbox';
 export type { CheckboxProps } from './types';
-export { checkboxClassnames } from './constants';
+export { checkboxClassnames, CHECKBOX_SIZE, MOBILE_CHECKBOX_SIZE, } from './constants';

package/node/components/Checkbox/index.js

@@ -14,7 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxClassnames = void 0;
+exports.MOBILE_CHECKBOX_SIZE = exports.CHECKBOX_SIZE = exports.checkboxClassnames = void 0;
 __exportStar(require("./Checkbox"), exports);
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "checkboxClassnames", { enumerable: true, get: function () { return constants_1.checkboxClassnames; } });
+Object.defineProperty(exports, "CHECKBOX_SIZE", { enumerable: true, get: function () { return constants_1.CHECKBOX_SIZE; } });
+Object.defineProperty(exports, "MOBILE_CHECKBOX_SIZE", { enumerable: true, get: function () { return constants_1.MOBILE_CHECKBOX_SIZE; } });

package/node/components/Checkbox/styles.js

@@ -22,19 +22,18 @@ exports.Wrapper = (0, styles_1.styled)('span', {
   display: flex;
   justify-content: center;
 
-  .${constants_1.checkboxClassnames.icon} {    
+  .${constants_1.checkboxClassnames.icon} {
     fill: ${({ $isDisabled, theme }) => $isDisabled && theme.palette.components.disabled};
   }
 
   .${constants_1.checkboxClassnames.symbol} {
-    fill: ${({ $isDisabled, theme }) => ($isDisabled ? theme.palette.grey[500] : 'white')};
+    fill: ${({ $isDisabled, theme }) => $isDisabled ? theme.palette.grey[500] : 'white'};
 
     ${mixins_1.easeOutBackTransition};
-
   }
-  
+
   .${constants_1.checkboxClassnames.outline} {
-    fill: ${({ $isDisabled, $isChecked, $isIndeterminate }) => (!$isDisabled && !$isChecked && !$isIndeterminate) && 'white'};
+    fill: ${({ $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled && !$isChecked && !$isIndeterminate && 'white'};
     stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
     isHover: false,
@@ -45,30 +44,31 @@ exports.Wrapper = (0, styles_1.styled)('span', {
 })};
 
     ${mixins_1.easeOutBackTransition};
-
   }
 
   .${constants_1.checkboxClassnames.iconChecked} {
     transform-origin: bottom;
-    transform: ${({ $isChecked, $isIndeterminate }) => ($isChecked && !$isIndeterminate ? 'scale(1)' : 'scale(0)')};
+    transform: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 'scale(1)' : 'scale(0)'};
 
-    opacity: ${({ $isChecked, $isIndeterminate }) => ($isChecked && !$isIndeterminate ? 1 : 0)};
+    opacity: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 1 : 0};
   }
-  
+
   .${constants_1.checkboxClassnames.iconIndeterminate} {
     transform-origin: bottom;
-    transform: ${({ $isIndeterminate }) => ($isIndeterminate ? 'scale(1)' : 'scale(0)')};
+    transform: ${({ $isIndeterminate }) => $isIndeterminate ? 'scale(1)' : 'scale(0)'};
 
     opacity: ${({ $isIndeterminate }) => ($isIndeterminate ? 1 : 0)};
   }
-  
+
   &:hover {
     .${constants_1.checkboxClassnames.icon} {
-      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]}
+      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
     }
-    
+
     .${constants_1.checkboxClassnames.outline} {
-      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => (!$isDisabled && !$isChecked && !$isIndeterminate) &&
+      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
+    !$isChecked &&
+    !$isIndeterminate &&
     theme.palette.background.elementHover};
       stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
@@ -83,22 +83,22 @@ exports.Wrapper = (0, styles_1.styled)('span', {
 `;
 exports.Input = styles_1.styled.input `
   cursor: ${({ disabled }) => !disabled && 'pointer'};
-  
+
   position: absolute;
 
-  width: 32px;
-  height: 32px;
+  width: ${constants_1.CHECKBOX_SIZE};
+  height: ${constants_1.CHECKBOX_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${constants_1.MOBILE_CHECKBOX_SIZE};
+    height: ${constants_1.MOBILE_CHECKBOX_SIZE};
   }
 
   &:focus-visible {
-    ~.${constants_1.checkboxClassnames.iconWrapper} > .${constants_1.checkboxClassnames.icon} {
+    ~ .${constants_1.checkboxClassnames.iconWrapper} > .${constants_1.checkboxClassnames.icon} {
       border-radius: ${({ theme }) => theme.shape.small};
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
       outline-offset: -2px;
@@ -110,12 +110,12 @@ exports.IconWrapper = styles_1.styled.span `
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: ${constants_1.CHECKBOX_SIZE};
+  height: ${constants_1.CHECKBOX_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${constants_1.MOBILE_CHECKBOX_SIZE};
+    height: ${constants_1.MOBILE_CHECKBOX_SIZE};
 
     .${constants_1.checkboxClassnames.icon} {
       width: 20px;

package/node/components/ScrollWrapper/ScrollWrapper.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+type ScrollWrapperProps = {
+    children: ReactNode;
+    shape?: 'small' | 'medium' | 'large';
+};
+export declare const ScrollWrapper: ({ children, shape, }: ScrollWrapperProps) => JSX.Element;
+export {};

package/node/components/ScrollWrapper/ScrollWrapper.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const ScrollWrapper = ({ children, shape = 'medium', }) => (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$shape": shape, children: children });
+exports.ScrollWrapper = ScrollWrapper;

package/node/components/ScrollWrapper/index.d.ts

@@ -0,0 +1 @@
+export * from './ScrollWrapper';

package/node/components/ScrollWrapper/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ScrollWrapper"), exports);

package/node/components/ScrollWrapper/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $shape: 'small' | 'medium' | 'large';
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/ScrollWrapper/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styles_1 = require("../styles");
+exports.Wrapper = styles_1.styled.div `
+  overflow: hidden;
+
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme, $shape }) => theme.shape[$shape]};
+`;

package/node/components/Tree/MultipleTreeList/TreeItem/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = exports.StyledTreeItem = exports.StyledCheckbox = void 0;
+const material_1 = require("@mui/material");
 const Checkbox_1 = require("../../../Checkbox");
 const styles_1 = require("../../../styles");
 const mixins_1 = require("../../../styles/mixins");
@@ -8,13 +9,26 @@ const TreeItem_1 = require("../../TreeItem");
 exports.StyledCheckbox = (0, styles_1.styled)(Checkbox_1.Checkbox) `
   padding-top: 0;
   padding-bottom: 0;
+
+  & > .${Checkbox_1.checkboxClassnames.input}, .${Checkbox_1.checkboxClassnames.iconWrapper} {
+    width: 32px;
+    height: 16px;
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      height: 20px;
+    }
+  }
 `;
 exports.StyledTreeItem = (0, styles_1.styled)(TreeItem_1.TreeItem) `
+  .${material_1.formControlLabelClasses.root} .${material_1.formControlLabelClasses.label} {
+    margin-left: 0;
+  }
+
   .${TreeItem_1.treeClassnames.note} {
     /* cSpell:ignore чекбоксом */
 
     /* Добавляем к отступу ширину контейнера с чекбоксом */
-    margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + 32px)`};
+    margin-left: ${Checkbox_1.CHECKBOX_SIZE};
   }
 `;
 exports.List = styles_1.styled.ul `

package/node/components/Tree/MultipleTreeList/styles.d.ts

@@ -3,9 +3,3 @@ export declare const List: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const InnerList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/node/components/Tree/MultipleTreeList/styles.js

@@ -1,12 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerList = exports.List = void 0;
+exports.List = void 0;
 const styles_1 = require("../../styles");
 const mixins_1 = require("../../styles/mixins");
 exports.List = styles_1.styled.ul `
   ${mixins_1.listContainer};
   overflow: hidden;
 `;
-exports.InnerList = (0, styles_1.styled)(exports.List) `
-  overflow: unset;
-`;

package/node/components/Tree/TreeItem/constants.d.ts

@@ -5,4 +5,5 @@ export declare const HALF_PADDING_COLLAPSE_BUTTON_WIDTH = "14px";
 export declare const TOOLTIP_PLACEMENT = "bottom-start";
 export declare const treeClassnames: {
     note: string;
+    label: string;
 };

package/node/components/Tree/TreeItem/constants.js

@@ -8,5 +8,6 @@ exports.GAP_WIDTH = '4px';
 exports.HALF_PADDING_COLLAPSE_BUTTON_WIDTH = '14px';
 exports.TOOLTIP_PLACEMENT = 'bottom-start';
 exports.treeClassnames = {
-    note: (0, utils_1.createUIKitClassname)('tree__item__note'),
+    note: (0, utils_1.createUIKitClassname)('tree-item__note'),
+    label: (0, utils_1.createUIKitClassname)('tree-item__label'),
 };

package/node/components/Tree/TreeItem/styles.d.ts

@@ -45,10 +45,6 @@ export declare const ChevronIcon: import("@emotion/styled").StyledComponent<{
 } & {
     $isActive?: boolean | undefined;
 }, {}, {}>;
-export declare const List: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;