@alfalab/core-components 45.8.0-beta.1 → 45.8.0-beta.3

package/status-badge/cssm/Component.js

@@ -2,19 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var CheckmarkCompactMIcon = require('@alfalab/icons-glyph/CheckmarkCompactMIcon');
-var CheckmarkCompactSIcon = require('@alfalab/icons-glyph/CheckmarkCompactSIcon');
-var ClockHandsCompactMIcon = require('@alfalab/icons-glyph/ClockHandsCompactMIcon');
-var ClockHandsCompactSIcon = require('@alfalab/icons-glyph/ClockHandsCompactSIcon');
-var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
-var CrossCompactSIcon = require('@alfalab/icons-glyph/CrossCompactSIcon');
-var ExclamationCompactMIcon = require('@alfalab/icons-glyph/ExclamationCompactMIcon');
-var ExclamationCompactSIcon = require('@alfalab/icons-glyph/ExclamationCompactSIcon');
-var InformationCompactMIcon = require('@alfalab/icons-glyph/InformationCompactMIcon');
-var InformationCompactSIcon = require('@alfalab/icons-glyph/InformationCompactSIcon');
-var StopBrickCompactMIcon = require('@alfalab/icons-glyph/StopBrickCompactMIcon');
-var StopBrickMIcon = require('@alfalab/icons-glyph/StopBrickMIcon');
-var StopBrickSIcon = require('@alfalab/icons-glyph/StopBrickSIcon');
+var hooks_useStatusBadgeIcon = require('./hooks/useStatusBadgeIcon.js');
 var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
@@ -31,67 +19,9 @@ var colorStyles = {
     default: defaultColors__default.default,
     inverted: invertedColors__default.default,
 };
-var ICON_MAP = {
-    'positive-checkmark': {
-        16: CheckmarkCompactSIcon.CheckmarkCompactSIcon,
-        20: CheckmarkCompactSIcon.CheckmarkCompactSIcon,
-        24: CheckmarkCompactMIcon.CheckmarkCompactMIcon,
-        32: CheckmarkCompactMIcon.CheckmarkCompactMIcon,
-        40: CheckmarkCompactMIcon.CheckmarkCompactMIcon,
-    },
-    'negative-cross': {
-        16: CrossCompactSIcon.CrossCompactSIcon,
-        20: CrossCompactSIcon.CrossCompactSIcon,
-        24: CrossCompactMIcon.CrossCompactMIcon,
-        32: CrossCompactMIcon.CrossCompactMIcon,
-        40: CrossCompactMIcon.CrossCompactMIcon,
-    },
-    'negative-alert': {
-        16: ExclamationCompactSIcon.ExclamationCompactSIcon,
-        20: ExclamationCompactSIcon.ExclamationCompactSIcon,
-        24: ExclamationCompactMIcon.ExclamationCompactMIcon,
-        32: ExclamationCompactMIcon.ExclamationCompactMIcon,
-        40: ExclamationCompactMIcon.ExclamationCompactMIcon,
-    },
-    'negative-block': {
-        16: StopBrickSIcon.StopBrickSIcon,
-        20: StopBrickSIcon.StopBrickSIcon,
-        24: StopBrickCompactMIcon.StopBrickCompactMIcon,
-        32: StopBrickMIcon.StopBrickMIcon,
-        40: StopBrickMIcon.StopBrickMIcon,
-    },
-    'attention-alert': {
-        16: ExclamationCompactSIcon.ExclamationCompactSIcon,
-        20: ExclamationCompactSIcon.ExclamationCompactSIcon,
-        24: ExclamationCompactMIcon.ExclamationCompactMIcon,
-        32: ExclamationCompactMIcon.ExclamationCompactMIcon,
-        40: ExclamationCompactMIcon.ExclamationCompactMIcon,
-    },
-    'neutral-information': {
-        16: InformationCompactSIcon.InformationCompactSIcon,
-        20: InformationCompactSIcon.InformationCompactSIcon,
-        24: InformationCompactMIcon.InformationCompactMIcon,
-        32: InformationCompactMIcon.InformationCompactMIcon,
-        40: InformationCompactMIcon.InformationCompactMIcon,
-    },
-    'neutral-operation': {
-        16: ClockHandsCompactSIcon.ClockHandsCompactSIcon,
-        20: ClockHandsCompactSIcon.ClockHandsCompactSIcon,
-        24: ClockHandsCompactMIcon.ClockHandsCompactMIcon,
-        32: ClockHandsCompactMIcon.ClockHandsCompactMIcon,
-        40: ClockHandsCompactMIcon.ClockHandsCompactMIcon,
-    },
-    'neutral-cross': {
-        16: CrossCompactSIcon.CrossCompactSIcon,
-        20: CrossCompactSIcon.CrossCompactSIcon,
-        24: CrossCompactMIcon.CrossCompactMIcon,
-        32: CrossCompactMIcon.CrossCompactMIcon,
-        40: CrossCompactMIcon.CrossCompactMIcon,
-    },
-};
 var StatusBadge = function (_a) {
-    var className = _a.className, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 24 : _b, view = _a.view, _c = _a.colors, colors = _c === void 0 ? 'default' : _c;
-    var Icon = ICON_MAP[view][size];
+    var className = _a.className, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 24 : _b, view = _a.view, _c = _a.colors, colors = _c === void 0 ? 'default' : _c, customIcons = _a.customIcons;
+    var Icon = hooks_useStatusBadgeIcon.useStatusBadgeIcon(view, size, customIcons).Icon;
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, styles__default.default["size-".concat(size)], colorStyles[colors].component, colorStyles[colors][view]), "data-test-id": dataTestId },
         React__default.default.createElement(Icon, null)));
 };

package/status-badge/cssm/consts/iconMap.d.ts

@@ -0,0 +1,4 @@
+import { StatusBadgeIcon, StatusBadgeSizes, StatusBadgeViews } from "../index";
+type IconMap = Record<StatusBadgeViews, Record<NonNullable<StatusBadgeSizes>, StatusBadgeIcon>>;
+declare const ICON_MAP: IconMap;
+export { IconMap, ICON_MAP };

package/status-badge/cssm/consts/iconMap.js

@@ -0,0 +1,76 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CheckmarkCompactMIcon = require('@alfalab/icons-glyph/CheckmarkCompactMIcon');
+var CheckmarkCompactSIcon = require('@alfalab/icons-glyph/CheckmarkCompactSIcon');
+var ClockHandsCompactMIcon = require('@alfalab/icons-glyph/ClockHandsCompactMIcon');
+var ClockHandsCompactSIcon = require('@alfalab/icons-glyph/ClockHandsCompactSIcon');
+var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
+var CrossCompactSIcon = require('@alfalab/icons-glyph/CrossCompactSIcon');
+var ExclamationCompactMIcon = require('@alfalab/icons-glyph/ExclamationCompactMIcon');
+var ExclamationCompactSIcon = require('@alfalab/icons-glyph/ExclamationCompactSIcon');
+var InformationCompactMIcon = require('@alfalab/icons-glyph/InformationCompactMIcon');
+var InformationCompactSIcon = require('@alfalab/icons-glyph/InformationCompactSIcon');
+var StopBrickCompactMIcon = require('@alfalab/icons-glyph/StopBrickCompactMIcon');
+var StopBrickMIcon = require('@alfalab/icons-glyph/StopBrickMIcon');
+var StopBrickSIcon = require('@alfalab/icons-glyph/StopBrickSIcon');
+
+var ICON_MAP = {
+    'positive-checkmark': {
+        16: CheckmarkCompactSIcon.CheckmarkCompactSIcon,
+        20: CheckmarkCompactSIcon.CheckmarkCompactSIcon,
+        24: CheckmarkCompactMIcon.CheckmarkCompactMIcon,
+        32: CheckmarkCompactMIcon.CheckmarkCompactMIcon,
+        40: CheckmarkCompactMIcon.CheckmarkCompactMIcon,
+    },
+    'negative-cross': {
+        16: CrossCompactSIcon.CrossCompactSIcon,
+        20: CrossCompactSIcon.CrossCompactSIcon,
+        24: CrossCompactMIcon.CrossCompactMIcon,
+        32: CrossCompactMIcon.CrossCompactMIcon,
+        40: CrossCompactMIcon.CrossCompactMIcon,
+    },
+    'negative-alert': {
+        16: ExclamationCompactSIcon.ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon.ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon.ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon.ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon.ExclamationCompactMIcon,
+    },
+    'negative-block': {
+        16: StopBrickSIcon.StopBrickSIcon,
+        20: StopBrickSIcon.StopBrickSIcon,
+        24: StopBrickCompactMIcon.StopBrickCompactMIcon,
+        32: StopBrickMIcon.StopBrickMIcon,
+        40: StopBrickMIcon.StopBrickMIcon,
+    },
+    'attention-alert': {
+        16: ExclamationCompactSIcon.ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon.ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon.ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon.ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon.ExclamationCompactMIcon,
+    },
+    'neutral-information': {
+        16: InformationCompactSIcon.InformationCompactSIcon,
+        20: InformationCompactSIcon.InformationCompactSIcon,
+        24: InformationCompactMIcon.InformationCompactMIcon,
+        32: InformationCompactMIcon.InformationCompactMIcon,
+        40: InformationCompactMIcon.InformationCompactMIcon,
+    },
+    'neutral-operation': {
+        16: ClockHandsCompactSIcon.ClockHandsCompactSIcon,
+        20: ClockHandsCompactSIcon.ClockHandsCompactSIcon,
+        24: ClockHandsCompactMIcon.ClockHandsCompactMIcon,
+        32: ClockHandsCompactMIcon.ClockHandsCompactMIcon,
+        40: ClockHandsCompactMIcon.ClockHandsCompactMIcon,
+    },
+    'neutral-cross': {
+        16: CrossCompactSIcon.CrossCompactSIcon,
+        20: CrossCompactSIcon.CrossCompactSIcon,
+        24: CrossCompactMIcon.CrossCompactMIcon,
+        32: CrossCompactMIcon.CrossCompactMIcon,
+        40: CrossCompactMIcon.CrossCompactMIcon,
+    },
+};
+
+exports.ICON_MAP = ICON_MAP;

package/status-badge/cssm/hooks/useStatusBadgeIcon.d.ts

@@ -0,0 +1,5 @@
+import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "../types/statusBadgePropTypes";
+declare const useStatusBadgeIcon: (view: StatusBadgeViews, size: StatusBadgeSizes, customIcons?: StatusBadgeCustomIcon) => {
+    Icon: import("../types/statusBadgePropTypes").StatusBadgeIcon;
+};
+export { useStatusBadgeIcon };

package/status-badge/cssm/hooks/useStatusBadgeIcon.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var consts_iconMap = require('../consts/iconMap.js');
+
+var useStatusBadgeIcon = function (view, size, customIcons) {
+    var iconsMap = consts_iconMap.ICON_MAP;
+    // transform initial icons map
+    if (customIcons) {
+        iconsMap = Object.keys(consts_iconMap.ICON_MAP).reduce(function (acc, current) {
+            var _a;
+            return (tslib.__assign(tslib.__assign({}, acc), (_a = {},
+                _a[current] = tslib.__assign(tslib.__assign({}, consts_iconMap.ICON_MAP[current]), customIcons[current]),
+                _a)));
+        }, {});
+    }
+    var Icon = iconsMap[view][size];
+    return { Icon: Icon };
+};
+
+exports.useStatusBadgeIcon = useStatusBadgeIcon;

package/status-badge/cssm/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon } from "./types/statusBadgePropTypes";

package/status-badge/cssm/types/statusBadgePropTypes.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+type StatusBadgeViews = 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
+type StatusBadgeSizes = 16 | 20 | 24 | 32 | 40;
+type StatusBadgeIcon = React.FC<React.SVGProps<SVGSVGElement>>;
+type StatusBadgeCustomIcon = Partial<Record<StatusBadgeViews, Partial<Record<StatusBadgeSizes, StatusBadgeIcon>>>>;
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon };

package/status-badge/esm/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "./types/statusBadgePropTypes";
 type StatusBadgeProps = {
     /**
      * Дополнительный класс
@@ -9,7 +10,7 @@ type StatusBadgeProps = {
      * Размер компонента
      * @default 24
      */
-    size?: 16 | 20 | 24 | 32 | 40;
+    size?: StatusBadgeSizes;
     /**
      * Набор цветов для компонента
      */
@@ -17,11 +18,15 @@ type StatusBadgeProps = {
     /**
      * Вид бейджа.
      */
-    view: 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
+    view: StatusBadgeViews;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Кастомные иконки
+     */
+    customIcons?: StatusBadgeCustomIcon;
 };
-declare const StatusBadge: ({ className, dataTestId, size, view, colors, }: StatusBadgeProps) => React.JSX.Element;
+declare const StatusBadge: ({ className, dataTestId, size, view, colors, customIcons, }: StatusBadgeProps) => React.JSX.Element;
 export { StatusBadgeProps, StatusBadge };

package/status-badge/esm/Component.js

@@ -1,18 +1,21 @@
 import React from 'react';
 import cn from 'classnames';
-import { CheckmarkCompactMIcon } from '@alfalab/icons-glyph/CheckmarkCompactMIcon';
-import { CheckmarkCompactSIcon } from '@alfalab/icons-glyph/CheckmarkCompactSIcon';
-import { ClockHandsCompactMIcon } from '@alfalab/icons-glyph/ClockHandsCompactMIcon';
-import { ClockHandsCompactSIcon } from '@alfalab/icons-glyph/ClockHandsCompactSIcon';
-import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
-import { CrossCompactSIcon } from '@alfalab/icons-glyph/CrossCompactSIcon';
-import { ExclamationCompactMIcon } from '@alfalab/icons-glyph/ExclamationCompactMIcon';
-import { ExclamationCompactSIcon } from '@alfalab/icons-glyph/ExclamationCompactSIcon';
-import { InformationCompactMIcon } from '@alfalab/icons-glyph/InformationCompactMIcon';
-import { InformationCompactSIcon } from '@alfalab/icons-glyph/InformationCompactSIcon';
-import { StopBrickCompactMIcon } from '@alfalab/icons-glyph/StopBrickCompactMIcon';
-import { StopBrickMIcon } from '@alfalab/icons-glyph/StopBrickMIcon';
-import { StopBrickSIcon } from '@alfalab/icons-glyph/StopBrickSIcon';
+import { useStatusBadgeIcon } from './hooks/useStatusBadgeIcon.js';
+import 'tslib';
+import './consts/iconMap.js';
+import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
+import '@alfalab/icons-glyph/ClockHandsCompactMIcon';
+import '@alfalab/icons-glyph/ClockHandsCompactSIcon';
+import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCompactSIcon';
+import '@alfalab/icons-glyph/ExclamationCompactMIcon';
+import '@alfalab/icons-glyph/ExclamationCompactSIcon';
+import '@alfalab/icons-glyph/InformationCompactMIcon';
+import '@alfalab/icons-glyph/InformationCompactSIcon';
+import '@alfalab/icons-glyph/StopBrickCompactMIcon';
+import '@alfalab/icons-glyph/StopBrickMIcon';
+import '@alfalab/icons-glyph/StopBrickSIcon';
 
 var defaultColors = {"positive-checkmark":"status-badge__positive-checkmark_1qjlx","negative-cross":"status-badge__negative-cross_1qjlx","negative-alert":"status-badge__negative-alert_1qjlx","negative-block":"status-badge__negative-block_1qjlx","attention-alert":"status-badge__attention-alert_1qjlx","neutral-information":"status-badge__neutral-information_1qjlx","neutral-operation":"status-badge__neutral-operation_1qjlx","neutral-cross":"status-badge__neutral-cross_1qjlx"};
 require('./default.css');
@@ -27,67 +30,9 @@ var colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-var ICON_MAP = {
-    'positive-checkmark': {
-        16: CheckmarkCompactSIcon,
-        20: CheckmarkCompactSIcon,
-        24: CheckmarkCompactMIcon,
-        32: CheckmarkCompactMIcon,
-        40: CheckmarkCompactMIcon,
-    },
-    'negative-cross': {
-        16: CrossCompactSIcon,
-        20: CrossCompactSIcon,
-        24: CrossCompactMIcon,
-        32: CrossCompactMIcon,
-        40: CrossCompactMIcon,
-    },
-    'negative-alert': {
-        16: ExclamationCompactSIcon,
-        20: ExclamationCompactSIcon,
-        24: ExclamationCompactMIcon,
-        32: ExclamationCompactMIcon,
-        40: ExclamationCompactMIcon,
-    },
-    'negative-block': {
-        16: StopBrickSIcon,
-        20: StopBrickSIcon,
-        24: StopBrickCompactMIcon,
-        32: StopBrickMIcon,
-        40: StopBrickMIcon,
-    },
-    'attention-alert': {
-        16: ExclamationCompactSIcon,
-        20: ExclamationCompactSIcon,
-        24: ExclamationCompactMIcon,
-        32: ExclamationCompactMIcon,
-        40: ExclamationCompactMIcon,
-    },
-    'neutral-information': {
-        16: InformationCompactSIcon,
-        20: InformationCompactSIcon,
-        24: InformationCompactMIcon,
-        32: InformationCompactMIcon,
-        40: InformationCompactMIcon,
-    },
-    'neutral-operation': {
-        16: ClockHandsCompactSIcon,
-        20: ClockHandsCompactSIcon,
-        24: ClockHandsCompactMIcon,
-        32: ClockHandsCompactMIcon,
-        40: ClockHandsCompactMIcon,
-    },
-    'neutral-cross': {
-        16: CrossCompactSIcon,
-        20: CrossCompactSIcon,
-        24: CrossCompactMIcon,
-        32: CrossCompactMIcon,
-        40: CrossCompactMIcon,
-    },
-};
 var StatusBadge = function (_a) {
-    var className = _a.className, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 24 : _b, view = _a.view, _c = _a.colors, colors = _c === void 0 ? 'default' : _c;
-    var Icon = ICON_MAP[view][size];
+    var className = _a.className, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 24 : _b, view = _a.view, _c = _a.colors, colors = _c === void 0 ? 'default' : _c, customIcons = _a.customIcons;
+    var Icon = useStatusBadgeIcon(view, size, customIcons).Icon;
     return (React.createElement("div", { className: cn(styles.component, className, styles["size-".concat(size)], colorStyles[colors].component, colorStyles[colors][view]), "data-test-id": dataTestId },
         React.createElement(Icon, null)));
 };

package/status-badge/esm/consts/iconMap.d.ts

@@ -0,0 +1,4 @@
+import { StatusBadgeIcon, StatusBadgeSizes, StatusBadgeViews } from "../index";
+type IconMap = Record<StatusBadgeViews, Record<NonNullable<StatusBadgeSizes>, StatusBadgeIcon>>;
+declare const ICON_MAP: IconMap;
+export { IconMap, ICON_MAP };

package/status-badge/esm/consts/iconMap.js

@@ -0,0 +1,74 @@
+import { CheckmarkCompactMIcon } from '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import { CheckmarkCompactSIcon } from '@alfalab/icons-glyph/CheckmarkCompactSIcon';
+import { ClockHandsCompactMIcon } from '@alfalab/icons-glyph/ClockHandsCompactMIcon';
+import { ClockHandsCompactSIcon } from '@alfalab/icons-glyph/ClockHandsCompactSIcon';
+import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
+import { CrossCompactSIcon } from '@alfalab/icons-glyph/CrossCompactSIcon';
+import { ExclamationCompactMIcon } from '@alfalab/icons-glyph/ExclamationCompactMIcon';
+import { ExclamationCompactSIcon } from '@alfalab/icons-glyph/ExclamationCompactSIcon';
+import { InformationCompactMIcon } from '@alfalab/icons-glyph/InformationCompactMIcon';
+import { InformationCompactSIcon } from '@alfalab/icons-glyph/InformationCompactSIcon';
+import { StopBrickCompactMIcon } from '@alfalab/icons-glyph/StopBrickCompactMIcon';
+import { StopBrickMIcon } from '@alfalab/icons-glyph/StopBrickMIcon';
+import { StopBrickSIcon } from '@alfalab/icons-glyph/StopBrickSIcon';
+
+var ICON_MAP = {
+    'positive-checkmark': {
+        16: CheckmarkCompactSIcon,
+        20: CheckmarkCompactSIcon,
+        24: CheckmarkCompactMIcon,
+        32: CheckmarkCompactMIcon,
+        40: CheckmarkCompactMIcon,
+    },
+    'negative-cross': {
+        16: CrossCompactSIcon,
+        20: CrossCompactSIcon,
+        24: CrossCompactMIcon,
+        32: CrossCompactMIcon,
+        40: CrossCompactMIcon,
+    },
+    'negative-alert': {
+        16: ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon,
+    },
+    'negative-block': {
+        16: StopBrickSIcon,
+        20: StopBrickSIcon,
+        24: StopBrickCompactMIcon,
+        32: StopBrickMIcon,
+        40: StopBrickMIcon,
+    },
+    'attention-alert': {
+        16: ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon,
+    },
+    'neutral-information': {
+        16: InformationCompactSIcon,
+        20: InformationCompactSIcon,
+        24: InformationCompactMIcon,
+        32: InformationCompactMIcon,
+        40: InformationCompactMIcon,
+    },
+    'neutral-operation': {
+        16: ClockHandsCompactSIcon,
+        20: ClockHandsCompactSIcon,
+        24: ClockHandsCompactMIcon,
+        32: ClockHandsCompactMIcon,
+        40: ClockHandsCompactMIcon,
+    },
+    'neutral-cross': {
+        16: CrossCompactSIcon,
+        20: CrossCompactSIcon,
+        24: CrossCompactMIcon,
+        32: CrossCompactMIcon,
+        40: CrossCompactMIcon,
+    },
+};
+
+export { ICON_MAP };

package/status-badge/esm/hooks/useStatusBadgeIcon.d.ts

@@ -0,0 +1,5 @@
+import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "../types/statusBadgePropTypes";
+declare const useStatusBadgeIcon: (view: StatusBadgeViews, size: StatusBadgeSizes, customIcons?: StatusBadgeCustomIcon) => {
+    Icon: import("../types/statusBadgePropTypes").StatusBadgeIcon;
+};
+export { useStatusBadgeIcon };

package/status-badge/esm/hooks/useStatusBadgeIcon.js

@@ -0,0 +1,32 @@
+import { __assign } from 'tslib';
+import { ICON_MAP } from '../consts/iconMap.js';
+import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
+import '@alfalab/icons-glyph/ClockHandsCompactMIcon';
+import '@alfalab/icons-glyph/ClockHandsCompactSIcon';
+import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCompactSIcon';
+import '@alfalab/icons-glyph/ExclamationCompactMIcon';
+import '@alfalab/icons-glyph/ExclamationCompactSIcon';
+import '@alfalab/icons-glyph/InformationCompactMIcon';
+import '@alfalab/icons-glyph/InformationCompactSIcon';
+import '@alfalab/icons-glyph/StopBrickCompactMIcon';
+import '@alfalab/icons-glyph/StopBrickMIcon';
+import '@alfalab/icons-glyph/StopBrickSIcon';
+
+var useStatusBadgeIcon = function (view, size, customIcons) {
+    var iconsMap = ICON_MAP;
+    // transform initial icons map
+    if (customIcons) {
+        iconsMap = Object.keys(ICON_MAP).reduce(function (acc, current) {
+            var _a;
+            return (__assign(__assign({}, acc), (_a = {},
+                _a[current] = __assign(__assign({}, ICON_MAP[current]), customIcons[current]),
+                _a)));
+        }, {});
+    }
+    var Icon = iconsMap[view][size];
+    return { Icon: Icon };
+};
+
+export { useStatusBadgeIcon };

package/status-badge/esm/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon } from "./types/statusBadgePropTypes";

package/status-badge/esm/index.js

@@ -1,6 +1,9 @@
 export { StatusBadge } from './Component.js';
 import 'react';
 import 'classnames';
+import './hooks/useStatusBadgeIcon.js';
+import 'tslib';
+import './consts/iconMap.js';
 import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
 import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
 import '@alfalab/icons-glyph/ClockHandsCompactMIcon';

package/status-badge/esm/types/statusBadgePropTypes.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+type StatusBadgeViews = 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
+type StatusBadgeSizes = 16 | 20 | 24 | 32 | 40;
+type StatusBadgeIcon = React.FC<React.SVGProps<SVGSVGElement>>;
+type StatusBadgeCustomIcon = Partial<Record<StatusBadgeViews, Partial<Record<StatusBadgeSizes, StatusBadgeIcon>>>>;
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon };

package/status-badge/hooks/useStatusBadgeIcon.d.ts

@@ -0,0 +1,5 @@
+import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "../types/statusBadgePropTypes";
+declare const useStatusBadgeIcon: (view: StatusBadgeViews, size: StatusBadgeSizes, customIcons?: StatusBadgeCustomIcon) => {
+    Icon: import("../types/statusBadgePropTypes").StatusBadgeIcon;
+};
+export { useStatusBadgeIcon };

package/status-badge/hooks/useStatusBadgeIcon.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var consts_iconMap = require('../consts/iconMap.js');
+
+var useStatusBadgeIcon = function (view, size, customIcons) {
+    var iconsMap = consts_iconMap.ICON_MAP;
+    // transform initial icons map
+    if (customIcons) {
+        iconsMap = Object.keys(consts_iconMap.ICON_MAP).reduce(function (acc, current) {
+            var _a;
+            return (tslib.__assign(tslib.__assign({}, acc), (_a = {},
+                _a[current] = tslib.__assign(tslib.__assign({}, consts_iconMap.ICON_MAP[current]), customIcons[current]),
+                _a)));
+        }, {});
+    }
+    var Icon = iconsMap[view][size];
+    return { Icon: Icon };
+};
+
+exports.useStatusBadgeIcon = useStatusBadgeIcon;

package/status-badge/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon } from "./types/statusBadgePropTypes";

package/status-badge/modern/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "./types/statusBadgePropTypes";
 type StatusBadgeProps = {
     /**
      * Дополнительный класс
@@ -9,7 +10,7 @@ type StatusBadgeProps = {
      * Размер компонента
      * @default 24
      */
-    size?: 16 | 20 | 24 | 32 | 40;
+    size?: StatusBadgeSizes;
     /**
      * Набор цветов для компонента
      */
@@ -17,11 +18,15 @@ type StatusBadgeProps = {
     /**
      * Вид бейджа.
      */
-    view: 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
+    view: StatusBadgeViews;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Кастомные иконки
+     */
+    customIcons?: StatusBadgeCustomIcon;
 };
-declare const StatusBadge: ({ className, dataTestId, size, view, colors, }: StatusBadgeProps) => React.JSX.Element;
+declare const StatusBadge: ({ className, dataTestId, size, view, colors, customIcons, }: StatusBadgeProps) => React.JSX.Element;
 export { StatusBadgeProps, StatusBadge };