@consta/uikit 3.9.3 → 3.10.0

package/__internal__/src/components/Calendar/Calendar.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './Calendar.css';
 import React from 'react';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { CalendarViewOneMonth } from './CalendarViewOneMonth/CalendarViewOneMonth';
 import { CalendarViewSlider } from './CalendarViewSlider/CalendarViewSlider';
 import { CalendarViewTwoMonths } from './CalendarViewTwoMonths/CalendarViewTwoMonths';
@@ -15,7 +15,7 @@ var viewMap = {
 };
 export var Calendar = React.forwardRef(function (props, ref) {
     var _a = props.view, view = _a === void 0 ? calendarPropViewDefault : _a, className = props.className, otherProps = __rest(props, ["view", "className"]);
-    var ViewComponent = getSizeByMap(viewMap, view);
+    var ViewComponent = getByMap(viewMap, view);
     return React.createElement(ViewComponent, __assign({}, otherProps, { ref: ref, className: cnCalendar(null, [className]) }));
 });
 export * from './CalendarCell/CalendarCell';

package/__internal__/src/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -16,7 +16,12 @@ export declare type СhoiceGroupPropWidth = typeof choiceGroupWidth[number];
 export declare const choiceGroupWidthDefault: СhoiceGroupPropWidth;
 export declare type ChoiceGroupPropGetLabel<ITEM> = (item: ITEM) => string | number;
 export declare type ChoiceGroupPropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps> | undefined;
-declare type CommonProps<ITEM> = {
+export declare type ChoiceGroupPropValue<ITEM, MULTIPLE extends boolean> = (MULTIPLE extends true ? ITEM[] : ITEM) | null;
+export declare type ChoiceGroupPropOnChange<ITEM, MULTIPLE extends boolean> = (props: {
+    e: React.ChangeEvent<HTMLInputElement>;
+    value: MULTIPLE extends true ? ITEM[] | null : ITEM;
+}) => void;
+declare type Props<ITEM, MULTIPLE extends boolean = false> = PropsWithHTMLAttributesAndRef<{
     size?: ChoiceGroupPropSize;
     form?: ChoiceGroupPropForm;
     view?: ChoiceGroupPropView;
@@ -27,30 +32,14 @@ declare type CommonProps<ITEM> = {
     getLabel: ChoiceGroupPropGetLabel<ITEM>;
     getIcon?: ChoiceGroupPropGetIcon<ITEM>;
     name: string;
-    children?: never;
     disabled?: boolean;
     getDisabled?: (item: ITEM) => boolean | undefined;
-};
-declare type OnChangeMultiple<ITEM> = (props: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    value: ITEM[] | null;
-}) => void;
-declare type OnChangeWithoutMultiple<ITEM> = (props: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    value: ITEM;
-}) => void;
-declare type PropsWithMultiple<ITEM> = {
-    value?: ITEM[] | null;
-    multiple: true;
-    onChange: OnChangeMultiple<ITEM>;
-};
-declare type PropsWithoutMultiple<ITEM> = {
-    value?: ITEM | null;
-    multiple: false;
-    onChange: OnChangeWithoutMultiple<ITEM>;
-};
-declare type Props<ITEM> = PropsWithHTMLAttributesAndRef<CommonProps<ITEM> & (PropsWithMultiple<ITEM> | PropsWithoutMultiple<ITEM>), HTMLDivElement>;
-declare type ChoiceGroup = <ITEM>(props: Props<ITEM>) => React.ReactElement | null;
+    value?: ChoiceGroupPropValue<ITEM, MULTIPLE>;
+    onChange?: ChoiceGroupPropOnChange<ITEM, MULTIPLE>;
+    multiple?: MULTIPLE;
+    children?: never;
+}, HTMLDivElement>;
+declare type ChoiceGroupComponent = <ITEM, MULTIPLE extends boolean = false>(props: Props<ITEM, MULTIPLE>) => React.ReactElement | null;
 export declare const cnChoiceGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const ChoiceGroup: ChoiceGroup;
+export declare const ChoiceGroup: ChoiceGroupComponent;
 export {};

package/__internal__/src/components/ChoiceGroup/ChoiceGroup.js

@@ -3,7 +3,7 @@ import './ChoiceGroup.css';
 import React from 'react';
 import { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { ChoiceGroupItem } from './Item/ChoiceGroup-Item';
 export var choiceGroupForms = ['default', 'brick', 'round'];
 export var choiceGroupDefaultForm = 'default';
@@ -28,7 +28,7 @@ export var ChoiceGroup = React.forwardRef(function (props, ref) {
         callBack: onChange,
         multiple: multiple
     }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
-    var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
     return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon, disabled: disabled }, [className]) }), items.map(function (item, idx) {
         var itemChecked = getChecked(item);
         var itemDisabled = !!getDisabled && getDisabled(item);

package/__internal__/src/components/Collapse/Collapse.js

@@ -3,7 +3,7 @@ import './Collapse.css';
 import React from 'react';
 import { IconArrowDown } from '../../icons/IconArrowDown/IconArrowDown';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { Text } from '../Text/Text';
 import { CollapseIcon, collapseIconPropDirection, } from './CollapseIcon/CollapseIcon';
 export var collapsePropSize = ['m', 'l', 's', 'xs', '2xs'];
@@ -48,7 +48,7 @@ export var Collapse = React.forwardRef(function (props, ref) {
                 hoverEffect: hoverEffect,
                 iconPosition: iconPosition
             }) }, otherProps),
-            React.createElement(CollapseIcon, { className: cnCollapse('Icon', { position: iconPosition }), size: getSizeByMap(sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
+            React.createElement(CollapseIcon, { className: cnCollapse('Icon', { position: iconPosition }), size: getByMap(sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
             React.createElement(Text, { className: cnCollapse('LabelText'), view: view, size: size }, label),
             iconPosition === 'left' && renderSide(rightSide)),
         React.createElement("div", { className: cnCollapse('Body', { isOpen: isOpen, divider: divider }) },

package/__internal__/src/components/ContextMenu/ContextMenuGroupHeader/ContextMenuGroupHeader.js

@@ -1,7 +1,7 @@
 import './ContextMenuGroupHeader.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 import { Text } from '../../Text/Text';
 import { contextMenuDefaultSize } from '../helpers';
 export var cnContextMenuGroupHeader = cn('ContextMenuGroupHeader');
@@ -12,5 +12,5 @@ var sizeMap = {
 };
 export var ContextMenuGroupHeader = function (_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? contextMenuDefaultSize : _b, first = _a.first;
-    return (React.createElement(Text, { view: "secondary", transform: "uppercase", className: cnContextMenuGroupHeader({ size: size, first: first }), size: getSizeByMap(sizeMap, size) }, label));
+    return (React.createElement(Text, { view: "secondary", transform: "uppercase", className: cnContextMenuGroupHeader({ size: size, first: first }), size: getByMap(sizeMap, size) }, label));
 };

package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js

@@ -44,11 +44,11 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
     // props относящиеся к уровню меню
     size = _a === void 0 ? contextMenuDefaultSize : _a, level = props.level, activeItem = props.activeItem, addLevel = props.addLevel, className = props.className, deleteLevel = props.deleteLevel, items = props.items, setHoveredParenLevel = props.setHoveredParenLevel, 
     // props относящиеся к пунктам меню
-    getLabel = props.getLabel, getRightSideBar = props.getRightSideBar, getLeftSideBar = props.getLeftSideBar, getSubItems = props.getSubItems, getGroupId = props.getGroupId, getAccent = props.getAccent, getDisabled = props.getDisabled, getOnClick = props.getOnClick, 
+    getLabel = props.getLabel, getRightSideBar = props.getRightSideBar, getLeftSideBar = props.getLeftSideBar, getSubItems = props.getSubItems, getGroupId = props.getGroupId, getAccent = props.getAccent, getDisabled = props.getDisabled, getOnClick = props.getOnClick, getItemOnClick = props.getItemOnClick, onItemClick = props.onItemClick, 
     // props относящиеся к группам меню
     sortGroup = props.sortGroup, getGroupLabel = props.getGroupLabel, 
     // props относящиеся к поповеру
-    direction = props.direction, possibleDirections = props.possibleDirections, offset = props.offset, onSetDirection = props.onSetDirection, hoveredParenLevel = props.hoveredParenLevel, spareDirection = props.spareDirection, anchorRef = props.anchorRef, otherProps = __rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
+    direction = props.direction, possibleDirections = props.possibleDirections, offset = props.offset, onSetDirection = props.onSetDirection, hoveredParenLevel = props.hoveredParenLevel, spareDirection = props.spareDirection, anchorRef = props.anchorRef, otherProps = __rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "getItemOnClick", "onItemClick", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
     var _b = __read(useState(false), 2), hovered = _b[0], setHovered = _b[1];
     var groups = getGroups(items, getGroupId, undefined, undefined, sortGroup && (function (a, b) { return sortGroup(a.key, b.key); }));
     var getItemIndex = function (groupId, itemIndex) { return groupId + "-" + itemIndex; };
@@ -94,7 +94,20 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
                 var leftSide = typeof getLeftSideBar === 'function' ? getLeftSideBar(item) : undefined;
                 var rightSide = typeof getRightSideBar === 'function' ? getRightSideBar(item) : undefined;
                 var subItems = typeof getSubItems === 'function' ? getSubItems(item) : undefined;
-                var onClick = !disabled && typeof getOnClick === 'function' ? getOnClick(item) : undefined;
+                var onClick = function (e) {
+                    var _a, _b;
+                    if (!disabled) {
+                        if (typeof getItemOnClick === 'function') {
+                            (_a = getItemOnClick(item)) === null || _a === void 0 ? void 0 : _a(e);
+                        }
+                        if (typeof getOnClick === 'function') {
+                            (_b = getOnClick(item)) === null || _b === void 0 ? void 0 : _b(e);
+                        }
+                        if (typeof onItemClick === 'function') {
+                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick({ e: e, item: item });
+                        }
+                    }
+                };
                 var onMouseEnter = subItems && !disabled
                     ? function () {
                         addLevel(level + 1, subItems, ref, itemIndex);

package/__internal__/src/components/ContextMenu/helpers.d.ts

@@ -16,7 +16,7 @@ export declare type ContextMenuPropGetKey<ITEM> = (item: ITEM) => string | numbe
 export declare type ContextMenuPropGetDisable<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type ContextMenuPropGetGroupLabel = (id: string | number | undefined) => string | number | undefined;
 export declare type ContextMenuPropSortGroup = (a: string | number, b: string | number) => number;
-export declare type ContextMenuPropGetOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>> | undefined;
+export declare type ContextMenuPropGetItemOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>> | undefined;
 export declare const contextMenuPropSubMenuDirections: readonly ["rightStartUp", "rightStartDown", "leftStartUp", "leftStartDown"];
 export declare type ContextMenuPropSubMenuDirection = typeof contextMenuPropSubMenuDirections[number];
 export declare const contextMenuPropDefaultSubMenuDirection: ContextMenuPropSubMenuDirection;
@@ -38,13 +38,18 @@ export declare type ContextMenuProps<ITEM> = PropsWithHTMLAttributesAndRef<{
     getAccent?: ContextMenuPropGetAccent<ITEM>;
     size?: ContextMenuPropSize;
     sortGroup?: ContextMenuPropSortGroup;
-    getOnClick?: ContextMenuPropGetOnClick<ITEM>;
+    getOnClick?: ContextMenuPropGetItemOnClick<ITEM>;
+    getItemOnClick?: ContextMenuPropGetItemOnClick<ITEM>;
     direction?: Direction;
     possibleDirections?: readonly Direction[];
     subMenuDirection?: ContextMenuPropSubMenuDirection;
     getKey?: ContextMenuPropGetKey<ITEM>;
     getDisabled?: ContextMenuPropGetDisable<ITEM>;
     offset?: number;
+    onItemClick?: (props: {
+        e: React.MouseEvent;
+        item: ITEM;
+    }) => void;
     onClickOutside?: ClickOutsideHandler;
     spareDirection?: Direction;
 } & PositioningProps, HTMLDivElement>;

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import isBefore from 'date-fns/isBefore';
 import isEqual from 'date-fns/isEqual';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 import { DatePickerFieldTypeDate } from '../DatePickerFieldTypeDate/DatePickerFieldTypeDate';
 import { datePickerErrorTypes } from '../helpers';
 import { mapFormForEnd, mapFormForStart } from './helpers';
@@ -88,6 +88,6 @@ export var DatePickerFieldTypeDateRange = forwardRef(function (props, ref) {
         setEndDate(value === null || value === void 0 ? void 0 : value[1]);
     }, [(_b = value === null || value === void 0 ? void 0 : value[1]) === null || _b === void 0 ? void 0 : _b.getTime()]);
     return (React.createElement("div", __assign({}, otherProps, { className: cnDatePickerFieldTypeDateRange(null, [className]), ref: ref }),
-        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getSizeByMap(mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
-        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getSizeByMap(mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
+        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getByMap(mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
+        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getByMap(mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
 });

package/__internal__/src/components/DateTimeCanary/DateTimeCanary.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { DateTimeTypeDate } from './DateTimeTypeDate/DateTimeTypeDate';
 import { DateTimeTypeDateTime } from './DateTimeTypeDateTime/DateTimeTypeDateTime';
 import { DateTimeTypeMonth } from './DateTimeTypeMonth/DateTimeTypeMonth';
@@ -16,7 +16,7 @@ var typeMap = {
 };
 export var DateTime = forwardRef(function (props, ref) {
     var _a = props.type, type = _a === void 0 ? dateTimePropTypeDefault : _a, otherProps = __rest(props, ["type"]);
-    var Component = getSizeByMap(typeMap, type);
+    var Component = getByMap(typeMap, type);
     return React.createElement(Component, __assign({}, otherProps, { ref: ref }));
 });
 export * from './helpers/types';

package/__internal__/src/components/ProgressSpin/ProgressSpin.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import './ProgressSpin.css';
 import React, { useMemo } from 'react';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { isNumber } from '../../utils/type-guards';
 export var progressSpinPropSize = ['m', 's', 'l', 'xl', '2xl'];
 export var progressSpinPropSizeDefault = progressSpinPropSize[0];
@@ -22,8 +22,8 @@ var strokeWidthMap = {
     '2xl': 3.5
 };
 function getSvgParamsBySize(size) {
-    var sizeOfPixels = getSizeByMap(sizeMap, size);
-    var strokeWidth = getSizeByMap(strokeWidthMap, size);
+    var sizeOfPixels = getByMap(sizeMap, size);
+    var strokeWidth = getByMap(strokeWidthMap, size);
     var radius = (sizeOfPixels - strokeWidth) / 2;
     var strokeDasharray = radius * 2 * Math.PI;
     return [sizeOfPixels, strokeWidth, radius, strokeDasharray];

package/__internal__/src/components/ProgressStepBarCanary/ProgressStepBarLine/ProgressStepBarLine.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './ProgressStepBarLine.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 var cnProgressStepBarLine = cn('ProgressStepBarLine');
 var mapVarsByStatus = {
     normal: 'var(--color-bg-normal)',
@@ -15,7 +15,7 @@ var backgroundGenerate = function (lines, direction) {
     var length = lines.length;
     for (var index = 0; index < length; index++) {
         var line = lines[index];
-        var color = getSizeByMap(mapVarsByStatus, line.status || 'normal');
+        var color = getByMap(mapVarsByStatus, line.status || 'normal');
         var from = lines[index - 1] ? lines[index - 1].size : 0;
         var to = line.size;
         background += color + " " + from + "px, " + color + " " + to + "px" + (index < length - 1 ? ', ' : ')');

package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './SelectItem.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 import { Checkbox } from '../../Checkbox/Checkbox';
 export var cnSelectItem = cn('SelectItem');
 var sizeCheckboxMap = {
@@ -14,6 +14,6 @@ var sizeCheckboxMap = {
 export var SelectItem = function (props) {
     var className = props.className, label = props.label, active = props.active, hovered = props.hovered, multiple = props.multiple, size = props.size, indent = props.indent, disabled = props.disabled, otherProps = __rest(props, ["className", "label", "active", "hovered", "multiple", "size", "indent", "disabled"]);
     return (React.createElement("div", __assign({}, otherProps, { className: cnSelectItem({ active: active, hovered: hovered, multiple: multiple, size: size, indent: indent, disabled: disabled }, [className]), "aria-selected": active, "aria-disabled": disabled, role: "option" }),
-        multiple && (React.createElement(Checkbox, { className: cnSelectItem('Checkbox'), checked: active, size: getSizeByMap(sizeCheckboxMap, size) })),
+        multiple && (React.createElement(Checkbox, { className: cnSelectItem('Checkbox'), checked: active, size: getByMap(sizeCheckboxMap, size) })),
         label));
 };

package/__internal__/src/components/SelectComponentsDeprecated/SelectItem/SelectItem.js

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './SelectItem.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 import { Checkbox } from '../../Checkbox/Checkbox';
 export var cnSelectItem = cn('SelectItemDeprecated');
 // в дальнейшем уберем обязательность onChange у Checkbox
@@ -17,6 +17,6 @@ var sizeCheckboxMap = {
 export var SelectItem = function (props) {
     var className = props.className, label = props.label, active = props.active, hovered = props.hovered, multiple = props.multiple, size = props.size, indent = props.indent, otherProps = __rest(props, ["className", "label", "active", "hovered", "multiple", "size", "indent"]);
     return (React.createElement("div", __assign({}, otherProps, { className: cnSelectItem({ active: active, hovered: hovered, multiple: multiple, size: size, indent: indent }, [className]), "aria-selected": active, role: "option" }),
-        multiple && (React.createElement(Checkbox, { className: cnSelectItem('Checkbox'), checked: active, onChange: emptyFunction, size: getSizeByMap(sizeCheckboxMap, size) })),
+        multiple && (React.createElement(Checkbox, { className: cnSelectItem('Checkbox'), checked: active, onChange: emptyFunction, size: getByMap(sizeCheckboxMap, size) })),
         label));
 };

package/__internal__/src/components/SnackBar/SnackBar.css

@@ -6,6 +6,12 @@
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  max-width: calc(400px + var(--space-xs) * 2);
+  padding-right: var(--space-xs);
+  padding-left: var(--space-xs);
 }
 
   .SnackBar-Item_animate_appear,

package/__internal__/src/components/Steps/StepsStep/StepsStep.js

@@ -2,7 +2,7 @@ import './StepsStep.css';
 import React from 'react';
 import { IconCheck } from '../../../icons/IconCheck/IconCheck';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 export var cnStepsStep = cn('StepsStep');
 var sizeMap = {
     m: 'xs',
@@ -13,7 +13,7 @@ export var StepsStep = React.forwardRef(function (props, ref) {
     var clickHandler = function (e) {
         !active && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
     };
-    var iconSize = getSizeByMap(sizeMap, size);
+    var iconSize = getByMap(sizeMap, size);
     return (React.createElement("button", { ref: ref, className: cnStepsStep({ size: size, active: active, disabled: disabled, completed: completed, skipped: skipped }, [className]), type: "button", title: label, onClick: clickHandler },
         completed && React.createElement(IconCheck, { className: cnStepsStep('Icon'), size: iconSize }),
         label));

package/__internal__/src/components/Table/ChoiceGroupFilter/TableChoiceGroupFilter.js

@@ -18,5 +18,5 @@ export var TableChoiceGroupFilter = function (_a) {
         setValue(value);
     };
     return (React.createElement(TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
-        React.createElement(ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, multiple: false, className: cnChoiceGroupFilter() })));
+        React.createElement(ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, className: cnChoiceGroupFilter() })));
 };

package/__internal__/src/components/Tabs/Tab/TabsTab.js

@@ -2,7 +2,7 @@ import './TabsTab.css';
 import React, { forwardRef } from 'react';
 import { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 export var cnTabsTab = cn('TabsTab');
 var sizeMap = {
     s: 'xs',
@@ -10,7 +10,7 @@ var sizeMap = {
 };
 export var TabsTab = forwardRef(function (props, ref) {
     var label = props.label, onChange = props.onChange, checked = props.checked, size = props.size, onlyIcon = props.onlyIcon, Icon = props.icon, iconSizeProp = props.iconSize, className = props.className;
-    var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
     return (React.createElement("button", { className: cnTabsTab({ size: size, checked: checked, onlyIcon: onlyIcon }, [cnMixFocus({ before: true }), className]), onClick: checked ? undefined : onChange, ref: ref, role: "tab", type: "button", title: onlyIcon ? label : undefined },
         Icon && React.createElement(Icon, { className: cnTabsTab('Icon'), size: iconSize }),
         !onlyIcon && label));

package/__internal__/src/components/TagBase/TagBase.js

@@ -3,7 +3,7 @@ import './TagBase.css';
 import React from 'react';
 import { IconClose } from '../../icons/IconClose/IconClose';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
 export var tagBasePropSize = ['m', 'xs', 's', 'l'];
 export var tagBasePropSizeDefault = tagBasePropSize[0];
@@ -24,8 +24,8 @@ export var TagBase = forwardRefWithAs(function (props, ref) {
     var Tag = as;
     var withCancel = typeof onCancel === 'function';
     var withIcon = !!Icon;
-    var IconCloseSize = getSizeByMap(sizeMap, size);
-    var IconSize = getSizeByMap(sizeMap, size, iconSize);
+    var IconCloseSize = getByMap(sizeMap, size);
+    var IconSize = getByMap(sizeMap, size, iconSize);
     return (React.createElement(Tag, __assign({}, otherProps, { className: cnTagBase({
             size: size,
             view: view,

package/__internal__/src/components/TextField/TextField.js

@@ -7,7 +7,7 @@ import { IconClose } from '../../icons/IconClose/IconClose';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { IconSelectOpen } from '../../icons/IconSelectOpen/IconSelectOpen';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { FieldCaption } from '../FieldCaption/FieldCaption';
 import { FieldLabel } from '../FieldLabel/FieldLabel';
@@ -24,7 +24,7 @@ export function TextFieldRender(props, ref) {
     var RightIcon = rightSide;
     var leftSideIsString = typeof leftSide === 'string';
     var rightSideIsString = typeof rightSide === 'string';
-    var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
     var handleChange = function (e) {
         var value = e.target.value;
         !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange({ e: e, id: id, name: name, value: value || null }));

package/__internal__/src/components/Theme/_color/Theme_color_gpnDark.css

@@ -14,7 +14,7 @@
   --color-bg-ghost: rgba(246, 251, 253, 0.1); /* Цвет затенения */
   --color-bg-tone: rgba(6, 20, 25, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(75, 89, 99); /* Цвет фона системнный */
+  --color-bg-system: rgb(77, 82, 91); /* Цвет фона системнный */
   --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +28,8 @@
   --color-typo-secondary: rgba(255, 255, 255, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(255, 255, 255, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(94, 121, 141); /* Цвет фона системнный */
+  --color-typo-system: rgb(99, 110, 131); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
   --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
   --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */

package/__internal__/src/components/Theme/_color/Theme_color_gpnDefault.css

@@ -14,7 +14,8 @@
   --color-bg-ghost: rgba(0, 32, 51, 0.08); /* Цвет затенения */
   --color-bg-tone: rgba(0, 32, 51, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(206, 216, 222); /* Цвет фона системнный */
+  --color-bg-system: rgb(222, 228, 232); /* Цвет фона системнный */
+
   --color-bg-normal: rgb(86, 185, 242); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +29,8 @@
   --color-typo-secondary: rgba(0, 32, 51, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(0, 32, 51, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(132, 167, 189); /* Цвет фона системнный */
+  --color-typo-system: rgb(151, 178, 196); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(51, 180, 255); /* Цвет фона нейтральный */
   --color-typo-success: rgb(9, 179, 123); /* Цвет текста успеха */
   --color-typo-caution: rgb(255, 161, 10); /* Цвет текста осторожности */

package/__internal__/src/components/Theme/_color/Theme_color_gpnDisplay.css

@@ -14,7 +14,8 @@
   --color-bg-ghost: rgba(246, 251, 253, 0.08); /* Цвет затенения */
   --color-bg-tone: rgba(0, 22, 31, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(75, 98, 114); /* Цвет фона системнный */
+  --color-bg-system: rgb(49, 85, 129); /* Цвет фона системнный */
+
   --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +29,8 @@
   --color-typo-secondary: rgba(246, 251, 253, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(246, 251, 253, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(96, 130, 154); /* Цвет фона системнный */
+  --color-typo-system: rgb(64, 114, 176); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
   --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
   --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */

package/__internal__/src/components/ThemeToggler/ThemeToggler.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
 import { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';
 import { IconCheck } from '../../icons/IconCheck/IconCheck';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { setRef } from '../../utils/setRef';
 import { Button } from '../Button/Button';
 import { ContextMenu } from '../ContextMenu/ContextMenu';
@@ -35,8 +35,8 @@ export var ThemeToggler = React.forwardRef(function (props, componentRef) {
         callBack: onChange,
         multiple: false
     }), getOnChange = _c.getOnChange, getChecked = _c.getChecked;
-    var iconSize = getSizeByMap(iconSizeMap, size);
-    var contextMenuSize = getSizeByMap(contextMenuSizeMap, size);
+    var iconSize = getByMap(iconSizeMap, size);
+    var contextMenuSize = getByMap(contextMenuSizeMap, size);
     var getButtonIcon = function () { return getItemIcon(items.find(function (theme) { return getChecked(theme); })); };
     var onButtonClick = function (e) {
         if (items.length > 2) {
@@ -59,5 +59,5 @@ export var ThemeToggler = React.forwardRef(function (props, componentRef) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, __assign({}, otherProps, { ref: ref, iconLeft: getButtonIcon(), onClick: onButtonClick, onlyIcon: true, size: size, view: "clear" })),
-        items.length > 2 && isOpen && (React.createElement(ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getOnClick: getOnChange, size: contextMenuSize }))));
+        items.length > 2 && isOpen && (React.createElement(ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getItemOnClick: getOnChange, size: contextMenuSize }))));
 });

package/__internal__/src/components/User/User.js

@@ -3,7 +3,7 @@ import './User.css';
 import React from 'react';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
 import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
@@ -43,11 +43,11 @@ export var User = forwardRefWithAs(function (props, ref) {
     var IconRight = iconRight;
     return (React.createElement(Tag, __assign({}, otherProps, { className: cnUser({ size: size, view: view, width: width, withArrow: withArrow, minified: onlyAvatar }, [className]), ref: ref }),
         React.createElement("div", { className: cnUser('AvatarWrapper', { status: status }) },
-            React.createElement(Avatar, { size: getSizeByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
+            React.createElement(Avatar, { size: getByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
         !onlyAvatar && (name || info) && (React.createElement("div", { className: cnUser('Block') },
             name && (React.createElement(Text, { className: cnUser('Name'), size: size, view: "primary", lineHeight: "2xs" }, name)),
-            info && size !== 's' && (React.createElement(Text, { className: cnUser('Info'), size: getSizeByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
-        withArrow && (React.createElement(IconSelect, { className: cnUser('Icon'), size: getSizeByMap(iconSizeMap, size), view: "secondary" })),
-        IconRight && !onIconRightClick && (React.createElement(IconRight, { className: cnUser('Icon'), size: getSizeByMap(iconSizeMap, size), view: "secondary" })),
-        IconRight && onIconRightClick && (React.createElement(Button, { className: cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getSizeByMap(buttonSizeMap, size), form: "round" }))));
+            info && size !== 's' && (React.createElement(Text, { className: cnUser('Info'), size: getByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
+        withArrow && (React.createElement(IconSelect, { className: cnUser('Icon'), size: getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && !onIconRightClick && (React.createElement(IconRight, { className: cnUser('Icon'), size: getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && onIconRightClick && (React.createElement(Button, { className: cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getByMap(buttonSizeMap, size), form: "round" }))));
 });

package/__internal__/src/hooks/useSelect/useSelect.js

@@ -69,7 +69,7 @@ export function useSelect(params) {
         var flag = false;
         if (searchValue.length > 0) {
             flag =
-                visibleItems.filter(function (group) { return isOptionForCreate(group) || group.items.length > 0 || group.group; }).length === 0 || !params.onCreate;
+                visibleItems.filter(function (group) { return isOptionForCreate(group) || group.items.length > 0 || group.group; }).length === 0 && !params.onCreate;
         }
         return flag;
     }, [visibleItems]);