@consta/uikit 3.9.3 → 3.12.1

package/__internal__/cjs-src/components/SliderCanary/useSliderStationing.js

@@ -0,0 +1,131 @@
+"use strict";
+exports.__esModule = true;
+exports.useSliderStationing = exports.getSteps = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+exports.getSteps = function (step, min, max) {
+    var stepsArray = [];
+    var size = min;
+    if (Array.isArray(step)) {
+        step.forEach(function (stepSize) {
+            stepsArray.push({
+                min: size,
+                max: stepSize
+            });
+            size += stepSize - size;
+        });
+        if (size !== max) {
+            stepsArray.push({
+                min: size,
+                max: max
+            });
+        }
+    }
+    else {
+        for (var i = min; i < max; i += step) {
+            stepsArray.push({
+                min: size,
+                max: size + (max - i < step ? max - i : step)
+            });
+            size += step;
+        }
+    }
+    return stepsArray;
+};
+exports.useSliderStationing = function (value, min, max, view, range, step, buttonRefs, sliderLineRef) {
+    var _a = tslib_1.__read(react_1.useState([]), 2), lineSizes = _a[0], setLineSizes = _a[1];
+    var _b = tslib_1.__read(react_1.useState([]), 2), buttonPositions = _b[0], setButtonPositions = _b[1];
+    var calculateLines = function () {
+        var sizesArray = [];
+        var absoluteSize = Math.abs(max - min);
+        if (typeof value !== 'undefined') {
+            if (view === 'default') {
+                if (!Array.isArray(value) && typeof value === 'number') {
+                    sizesArray.push({
+                        width: (1 - (max - value) / absoluteSize) * 100,
+                        active: true
+                    });
+                    sizesArray.push({
+                        width: ((max - value) / absoluteSize) * 100,
+                        active: false
+                    });
+                }
+                else if (Array.isArray(value) && value) {
+                    sizesArray.push({
+                        width: ((value[0] - min) / absoluteSize) * 100,
+                        active: false
+                    });
+                    sizesArray.push({
+                        width: ((value[1] - value[0]) / absoluteSize) * 100,
+                        active: true
+                    });
+                    sizesArray.push({
+                        width: ((max - value[1]) / absoluteSize) * 100,
+                        active: false
+                    });
+                }
+                else {
+                    sizesArray.push({
+                        width: 100,
+                        active: false
+                    });
+                }
+            }
+            else if (typeof step !== 'undefined') {
+                exports.getSteps(step, min, max).forEach(function (stepSize) {
+                    sizesArray.push({
+                        width: (Math.abs(stepSize.max - stepSize.min) * 100) / absoluteSize,
+                        active: (typeof value === 'number' || Array.isArray(value)) &&
+                            (range && Array.isArray(value)
+                                ? stepSize.max > value[0] && stepSize.min < value[1]
+                                : stepSize.max <= value)
+                    });
+                });
+            }
+        }
+        else {
+            sizesArray.push({
+                width: 100,
+                active: false
+            });
+        }
+        return sizesArray;
+    };
+    var getValidValue = function (value) {
+        if (value < min)
+            return min;
+        if (value > max)
+            return max;
+        return value;
+    };
+    var calculateButtonPositions = react_1.useCallback(function () {
+        var absoluteSize = Math.abs(max - min);
+        var defaultPaddingValue = 0;
+        var positions = [];
+        buttonRefs.forEach(function (buttonRef, index) {
+            var _a, _b;
+            if (buttonRef.current &&
+                buttonRef.current.offsetWidth &&
+                sliderLineRef.current &&
+                sliderLineRef.current.offsetWidth) {
+                defaultPaddingValue =
+                    (absoluteSize * ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth)) /
+                        (2 * ((_b = sliderLineRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth)) || 0;
+            }
+            if (typeof value === 'number' || Array.isArray(value)) {
+                positions.push(typeof value === 'number'
+                    ? (1 - (max - getValidValue(value) + defaultPaddingValue) / absoluteSize) * 100
+                    : (1 - (max - getValidValue(value[index]) + defaultPaddingValue) / absoluteSize) * 100);
+            }
+        });
+        return positions;
+    }, [buttonRefs, sliderLineRef]);
+    react_1.useEffect(function () {
+        setLineSizes(calculateLines());
+        setButtonPositions(calculateButtonPositions());
+    }, [value, min, max, range, step, view]);
+    return {
+        lineSizes: lineSizes,
+        buttonPositions: buttonPositions
+    };
+};

package/__internal__/cjs-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__/cjs-src/components/SnackBar/SnackBar.d.ts

@@ -1,6 +1,6 @@
 import './SnackBar.css';
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 export declare type SnackBarPropItemAction = {
     label: string | number;
@@ -15,7 +15,7 @@ export declare type Item = {
     status?: SnackBarItemStatus;
     autoClose?: boolean | number;
     showProgress?: 'timer';
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     actions?: SnackBarPropItemAction[];
     onClose?: (item: Item) => void;
     onAutoClose?: (item: Item) => void;

package/__internal__/cjs-src/components/Steps/Steps.css

@@ -1,9 +1,36 @@
 .Steps {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
 }
 
   .Steps-Item:not(:last-child) {
       margin-right: var(--space-xs);
     }
+
+  .Steps-List {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: visible;
+  }
+
+  .Steps-List::-webkit-scrollbar {
+      display: none;
+    }
+
+  .Steps-Button_side_left {
+        margin-right: var(--space-xs);
+      }
+
+  .Steps-Button_side_right {
+        margin-left: var(--space-xs);
+      }

package/__internal__/cjs-src/components/Steps/Steps.js

@@ -3,20 +3,49 @@ exports.__esModule = true;
 exports.Steps = exports.cnSteps = exports.stepsDefaultSize = exports.stepsSizes = void 0;
 var tslib_1 = require("tslib");
 require("./Steps.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
+var useOverflow_1 = require("../../hooks/useOverflow/useOverflow");
+var useScrollElements_1 = require("../../hooks/useScrollElements/useScrollElements");
+var IconArrowLeft_1 = require("../../icons/IconArrowLeft/IconArrowLeft");
+var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
 var bem_1 = require("../../utils/bem");
+var Button_1 = require("../Button/Button");
 var StepsStep_1 = require("./StepsStep/StepsStep");
 exports.stepsSizes = ['m', 'l'];
 exports.stepsDefaultSize = exports.stepsSizes[0];
 exports.cnSteps = bem_1.cn('Steps');
 exports.Steps = react_1["default"].forwardRef(function (props, ref) {
     var _a = props.size, size = _a === void 0 ? exports.stepsDefaultSize : _a, items = props.items, value = props.value, getLabel = props.getLabel, getDisabled = props.getDisabled, getCompleted = props.getCompleted, getSkipped = props.getSkipped, onChange = props.onChange, className = props.className, otherProps = tslib_1.__rest(props, ["size", "items", "value", "getLabel", "getDisabled", "getCompleted", "getSkipped", "onChange", "className"]);
-    var _b = useChoiceGroup_1.useChoiceGroup({
+    var _b = tslib_1.__read(react_1.useState(-1), 2), activeStep = _b[0], setActiveStep = _b[1];
+    var _c = useChoiceGroup_1.useChoiceGroup({
         value: value,
         getKey: getLabel,
         callBack: onChange,
         multiple: false
-    }), getOnChange = _b.getOnChange, getChecked = _b.getChecked;
-    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: exports.cnSteps({ size: size }, [className]) }, otherProps), items.map(function (item, index) { return (react_1["default"].createElement(StepsStep_1.StepsStep, { key: index, className: exports.cnSteps('Item'), label: (getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item)) ? getLabel(item) : index + 1 + " " + getLabel(item), size: size, active: getChecked(item), onChange: getOnChange(item), completed: getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item), skipped: getSkipped === null || getSkipped === void 0 ? void 0 : getSkipped(item), disabled: getDisabled === null || getDisabled === void 0 ? void 0 : getDisabled(item) })); })));
+    }), getOnChange = _c.getOnChange, getChecked = _c.getChecked;
+    react_1.useMemo(function () {
+        items.forEach(function (item, index) {
+            if (getChecked(item)) {
+                setActiveStep(index);
+            }
+        });
+    }, [items, value]);
+    var _d = useScrollElements_1.useScrollElements(items), refs = _d.refs, scrollTo = _d.scrollTo;
+    var stepsRef = react_1.useRef(null);
+    var isOverflow = useOverflow_1.useOverflow({ currentRef: stepsRef });
+    var changeStep = function (e, prev) {
+        if (prev && activeStep !== 0) {
+            getOnChange(items[activeStep - 1])(e);
+            scrollTo(activeStep - 1);
+        }
+        if (!prev && activeStep !== items.length - 1) {
+            getOnChange(items[activeStep + 1])(e);
+            scrollTo(activeStep + 1);
+        }
+    };
+    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: exports.cnSteps({ size: size }, [className]) }, otherProps),
+        isOverflow && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowLeft_1.IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: exports.cnSteps('Button', { side: 'left' }), onClick: function (e) { return changeStep(e, true); } })),
+        react_1["default"].createElement("div", { ref: stepsRef, className: exports.cnSteps('List') }, items.map(function (item, index) { return (react_1["default"].createElement(StepsStep_1.StepsStep, { key: index, ref: refs[index], className: exports.cnSteps('Item'), label: (getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item)) ? getLabel(item) : index + 1 + " " + getLabel(item), size: size, active: activeStep === index, onChange: getOnChange(item), completed: getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item), skipped: getSkipped === null || getSkipped === void 0 ? void 0 : getSkipped(item), disabled: getDisabled === null || getDisabled === void 0 ? void 0 : getDisabled(item) })); })),
+        isOverflow && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: exports.cnSteps('Button', { side: 'right' }), onClick: function (e) { return changeStep(e, false); } }))));
 });

package/__internal__/cjs-src/components/Steps/StepsStep/StepsStep.css

@@ -16,6 +16,7 @@
   font-family: var(--font);
   line-height: var(--line-height-text-s);
   text-align: left;
+  white-space: nowrap;
   cursor: pointer;
   -webkit-transition: color 0.2s, font-weight 0.2s;
   transition: color 0.2s, font-weight 0.2s;

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

@@ -6,7 +6,7 @@ require("./StepsStep.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var IconCheck_1 = require("../../../icons/IconCheck/IconCheck");
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 exports.cnStepsStep = bem_1.cn('StepsStep');
 var sizeMap = {
     m: 'xs',
@@ -17,7 +17,7 @@ exports.StepsStep = react_1["default"].forwardRef(function (props, ref) {
     var clickHandler = function (e) {
         !active && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
     };
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size);
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
     return (react_1["default"].createElement("button", { ref: ref, className: exports.cnStepsStep({ size: size, active: active, disabled: disabled, completed: completed, skipped: skipped }, [className]), type: "button", title: label, onClick: clickHandler },
         completed && react_1["default"].createElement(IconCheck_1.IconCheck, { className: exports.cnStepsStep('Icon'), size: iconSize }),
         label));

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

@@ -21,5 +21,5 @@ exports.TableChoiceGroupFilter = function (_a) {
         setValue(value);
     };
     return (react_1["default"].createElement(TableFilterContainer_1.TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
-        react_1["default"].createElement(ChoiceGroup_1.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_1["default"].createElement(ChoiceGroup_1.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__/cjs-src/components/Table/NumberFilter/TableNumberFilter.js

@@ -14,14 +14,6 @@ exports.TableNumberFilter = function (_a) {
     var _d = tslib_1.__read(react_1.useState((_b = filterValue) === null || _b === void 0 ? void 0 : _b.min), 2), minValue = _d[0], setMinValue = _d[1];
     var _e = tslib_1.__read(react_1.useState((_c = filterValue) === null || _c === void 0 ? void 0 : _c.max), 2), maxValue = _e[0], setMaxValue = _e[1];
     var textFieldRef = react_1.useRef(null);
-    react_1.useEffect(function () {
-        // setTimeout нужен для корректного выставления автофокуса
-        setTimeout(function () {
-            if (textFieldRef.current) {
-                textFieldRef.current.focus();
-            }
-        });
-    }, []);
     var confirmHandler = function () {
         onConfirm({
             min: minValue,
@@ -30,6 +22,6 @@ exports.TableNumberFilter = function (_a) {
     };
     return (react_1["default"].createElement(TableFilterContainer_1.TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
         react_1["default"].createElement("div", { className: cnNumberFilter('Inputs') },
-            react_1["default"].createElement(TextField_1.TextField, { id: "\u043E\u0442", leftSide: "\u043E\u0442", value: minValue, onChange: function (e) { return setMinValue(e.value); }, form: "defaultBrick", size: "m", inputRef: textFieldRef }),
+            react_1["default"].createElement(TextField_1.TextField, { id: "\u043E\u0442", leftSide: "\u043E\u0442", value: minValue, onChange: function (e) { return setMinValue(e.value); }, form: "defaultBrick", size: "m", autoFocus: true, inputRef: textFieldRef }),
             react_1["default"].createElement(TextField_1.TextField, { leftSide: "\u0434\u043E", id: "\u0434\u043E", value: maxValue, onChange: function (e) { return setMaxValue(e.value); }, form: "clearDefault", size: "m" }))));
 };

package/__internal__/cjs-src/components/Table/Table.d.ts

@@ -103,6 +103,11 @@ export declare type TableProps<T extends TableRow> = {
     onRowHover?: onRowHover;
     onRowClick?: onRowClick;
     onRowCreate?: onRowCreate;
+    getAdditionalClassName?: (props: {
+        column: TableColumn<T>;
+        row: T;
+        isActive: boolean;
+    }) => string;
     rowCreateText?: string;
     lazyLoad?: LazyLoad;
     onFiltersUpdated?: (filters: SelectedFilters) => void;

package/__internal__/cjs-src/components/Table/Table.js

@@ -59,7 +59,7 @@ var sortingData = function (rows, sorting, onSortBy) {
 var defaultEmptyRowsPlaceholder = (react_1["default"].createElement(Text_1.Text, { as: "span", view: "primary", size: "s", lineHeight: "s" }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"));
 var InternalTable = function (props, ref) {
     var _a, _b, _c, _d;
-    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
+    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, getAdditionalClassName = props.getAdditionalClassName, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
     var _s = helpers_1.useHeaderData(columns), headers = _s.headers, flattenedHeaders = _s.flattenedHeaders, lowHeaders = _s.lowHeaders, headerRowsRefs = _s.headerRowsRefs, headerRowsHeights = _s.headerRowsHeights, resizerTopOffsets = _s.resizerTopOffsets;
     var stickyColumnsGrid = ((_a = headers[0][stickyColumns - 1]) === null || _a === void 0 ? void 0 : _a.position.gridIndex) +
         (((_b = headers[0][stickyColumns - 1]) === null || _b === void 0 ? void 0 : _b.position.colSpan) || 1);
@@ -357,6 +357,10 @@ var InternalTable = function (props, ref) {
                                 ? activeRow.id !== undefined && activeRow.id !== row.id
                                 : false,
                             isMerged: column.mergeCells && rowSpan > 1
+                        }), className: getAdditionalClassName === null || getAdditionalClassName === void 0 ? void 0 : getAdditionalClassName({
+                            column: column,
+                            row: row,
+                            isActive: activeRow ? activeRow.id === row.id : false
                         }), onClick: function (e) {
                             return handleSelectRow({ id: row.id, e: e });
                         }, column: column, verticalAlign: verticalAlign, isClickable: !!isRowsClickable, showVerticalShadow: showVerticalCellShadow &&

package/__internal__/cjs-src/components/Tabs/Tab/TabsTab.d.ts

@@ -1,12 +1,12 @@
 import './TabsTab.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
 import { TabsPropSize } from '../Tabs';
 export declare const cnTabsTab: import("@bem-react/classname").ClassNameFormatter;
 declare type Props = {
     size: TabsPropSize;
     onlyIcon?: boolean;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     iconSize?: IconPropSize;
     label: string;
     checked: boolean;

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

@@ -6,7 +6,7 @@ require("./TabsTab.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var MixFocus_1 = require("../../../mixs/MixFocus/MixFocus");
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 exports.cnTabsTab = bem_1.cn('TabsTab');
 var sizeMap = {
     s: 'xs',
@@ -14,7 +14,7 @@ var sizeMap = {
 };
 exports.TabsTab = react_1.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_1.getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap_1.getByMap(sizeMap, size, iconSizeProp);
     return (react_1["default"].createElement("button", { className: exports.cnTabsTab({ size: size, checked: checked, onlyIcon: onlyIcon }, [MixFocus_1.cnMixFocus({ before: true }), className]), onClick: checked ? undefined : onChange, ref: ref, role: "tab", type: "button", title: onlyIcon ? label : undefined },
         Icon && react_1["default"].createElement(Icon, { className: exports.cnTabsTab('Icon'), size: iconSize }),
         !onlyIcon && label));

package/__internal__/cjs-src/components/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import './Tabs.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { cnTabsTab, TabsTab } from './Tab/TabsTab';
 export declare const tabsSizes: readonly ["m", "s"];
@@ -16,7 +16,7 @@ export declare const tabsFitModes: readonly ["scroll", "dropdown"];
 export declare type TabsPropFitMode = typeof tabsFitModes[number];
 export declare const tabsDefaultFitMode: TabsPropFitMode;
 export declare type TabsPropGetLabel<ITEM> = (item: ITEM) => string | number;
-export declare type TabsPropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps> | undefined;
+export declare type TabsPropGetIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
 export declare type TabsPropOnChange<ITEM, ITEM_ELEMENT> = (props: {
     e: React.MouseEvent<ITEM_ELEMENT>;
     value: ITEM;
@@ -26,7 +26,7 @@ declare type RenderItemProps<ITEM, ELEMENT extends HTMLElement> = {
     onChange: React.MouseEventHandler<ELEMENT>;
     checked: boolean;
     label: string;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     size: TabsPropSize;
     iconSize?: IconPropSize;
     onlyIcon?: boolean;

package/__internal__/cjs-src/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent, IconProps } from '../../icons/Icon/Icon';
 import { TagBase } from '../TagBase/TagBase';
 declare type TagBaseProps = React.ComponentProps<typeof TagBase>;
 export declare const tagPropMode: readonly ["button", "check", "cancel", "link", "info"];
@@ -9,7 +9,7 @@ declare type CommonProps = {
     size?: TagBaseProps['size'];
     label: TagBaseProps['label'];
     group?: TagBaseProps['group'];
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     iconSize?: IconProps['size'];
     children?: never;
 };

package/__internal__/cjs-src/components/TagBase/TagBase.d.ts

@@ -1,12 +1,12 @@
 import './TagBase.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 export declare const tagBasePropSize: readonly ["m", "xs", "s", "l"];
 export declare const tagBasePropSizeDefault: "m";
 export declare type TagBasePropSize = typeof tagBasePropSize[number];
 export declare const tagBasePropGroupNumberValue: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9];
 export declare const tagBasePropGroupStringValue: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-export declare const tagBasePropGroup: ("1" | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
+export declare const tagBasePropGroup: ("1" | 1 | 4 | 2 | 7 | 3 | 5 | 6 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
 export declare type TagBasePropGroup = typeof tagBasePropGroup[number];
 export declare const tagBasePropView: readonly ["stroked", "filled"];
 export declare const tagBasePropViewDefault: "stroked";
@@ -18,7 +18,7 @@ export declare type Props = {
     view?: TagBasePropView;
     group?: TagBasePropGroup;
     onCancel?: React.MouseEventHandler<HTMLButtonElement>;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     iconSize?: IconPropSize;
     withAction?: boolean;
 };

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

@@ -6,7 +6,7 @@ require("./TagBase.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var IconClose_1 = require("../../icons/IconClose/IconClose");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
 exports.tagBasePropSize = ['m', 'xs', 's', 'l'];
 exports.tagBasePropSizeDefault = exports.tagBasePropSize[0];
@@ -27,8 +27,8 @@ exports.TagBase = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref)
     var Tag = as;
     var withCancel = typeof onCancel === 'function';
     var withIcon = !!Icon;
-    var IconCloseSize = getSizeByMap_1.getSizeByMap(sizeMap, size);
-    var IconSize = getSizeByMap_1.getSizeByMap(sizeMap, size, iconSize);
+    var IconCloseSize = getByMap_1.getByMap(sizeMap, size);
+    var IconSize = getByMap_1.getByMap(sizeMap, size, iconSize);
     return (react_1["default"].createElement(Tag, tslib_1.__assign({}, otherProps, { className: exports.cnTagBase({
             size: size,
             view: view,

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

@@ -10,7 +10,7 @@ var IconClose_1 = require("../../icons/IconClose/IconClose");
 var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
 var IconSelectOpen_1 = require("../../icons/IconSelectOpen/IconSelectOpen");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var FieldCaption_1 = require("../FieldCaption/FieldCaption");
 var FieldLabel_1 = require("../FieldLabel/FieldLabel");
@@ -27,7 +27,7 @@ function TextFieldRender(props, ref) {
     var RightIcon = rightSide;
     var leftSideIsString = typeof leftSide === 'string';
     var rightSideIsString = typeof rightSide === 'string';
-    var iconSize = getSizeByMap_1.getSizeByMap(helpers_1.sizeMap, size, iconSizeProp);
+    var iconSize = getByMap_1.getByMap(helpers_1.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 }));
@@ -58,6 +58,14 @@ function TextFieldRender(props, ref) {
         'id': id ? id.toString() : '',
         'aria-label': ariaLabel
     };
+    react_1.useEffect(function () {
+        if (autoFocus) {
+            setTimeout(function () {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+    }, []);
     var textareaProps = {
         rows: rows,
         cols: cols,

package/__internal__/cjs-src/components/TextField/helpers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 export declare type TextFieldPropValue = string | null;
 export declare type TextFieldPropName = string;
@@ -42,7 +42,7 @@ export declare type TextFieldPropsTextareaType<TYPE> = TYPE extends 'textarea' ?
 export declare type TextFieldPropRightSide<TYPE> = TYPE extends 'number' ? {
     rightSide?: never;
 } : {
-    rightSide?: string | React.FC<IconProps>;
+    rightSide?: string | IconComponent;
 };
 export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<{
     className?: string;
@@ -64,8 +64,8 @@ export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttribute
     onBlur?: React.FocusEventHandler<HTMLElement>;
     autoFocus?: boolean;
     placeholder?: string;
-    leftSide?: string | React.FC<IconProps>;
-    rightSide?: string | React.FC<IconProps>;
+    leftSide?: string | IconComponent;
+    rightSide?: string | IconComponent;
     withClearButton?: boolean;
     autoComplete?: TextFieldPropAutoComplete;
     max?: number | string;

package/__internal__/cjs-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__/cjs-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__/cjs-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__/cjs-src/components/ThemeToggler/ThemeToggler.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { Direction } from '../Popover/Popover';
 export declare const themeTogglerPropSize: readonly ["m", "l", "s", "xs"];
@@ -11,7 +11,7 @@ export declare type ThemePropSetValue<ITEM> = (props: {
 }) => void;
 export declare type ThemePropGetKey<ITEM> = (item: ITEM) => string | number;
 export declare type ThemePropGetLabel<ITEM> = (item: ITEM) => string;
-export declare type ThemePropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps>;
+export declare type ThemePropGetIcon<ITEM> = (item: ITEM) => IconComponent;
 export declare type Props<ITEM> = PropsWithHTMLAttributesAndRef<{
     size?: ThemeTogglerPropSize;
     className?: string;