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

package/skeleton/cssm/index.module.css

@@ -19,11 +19,8 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: none;
-
-    /* experimental animation switcher */
-    --skeleton-gradient-animation-display: block;
-    --skeleton-bg-animation-display: none;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-bg-animation-display: block;
     --skeleton-bg-animation-color: transparent;
 } .component {
     position: relative;
@@ -32,13 +29,14 @@
     color: transparent;
     border-radius: var(--skeleton-border-radius);
     overflow: hidden;
-    -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-            backdrop-filter: var(--skeleton-backdrop-filter);
     background: var(--skeleton-default-color);
 
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
-} .component > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black)
+} .component.allowBackdropBlur {
+        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
+                backdrop-filter: var(--skeleton-backdrop-filter);
+    } .component > * {
     visibility: hidden;
 } .component:before {
     content: '';
@@ -61,42 +59,11 @@
     .animate:before {
         opacity: 0.4;
     }
-} .animate:after {
-    display: var(--skeleton-gradient-animation-display);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 500%;
-    height: 100%;
-    transform: translateX(-80%);
-    animation-name: gradient;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-image: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0) 40%,
-        rgba(0, 0, 0, 0.05) 50%,
-        rgba(0, 0, 0, 0) 60%,
-        rgba(0, 0, 0, 0)
-    );
-} @keyframes gradient {
-    0% {
-        transform: translateX(-80%);
-    }
-    67% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(0);
-    }
 } @keyframes background {
     0% {
-        background: rgb(182, 188, 195);
+        background: var(--color-light-neutral-translucent-100);
     }
     100% {
-        background: rgb(198, 205, 214);
+        background: var(--color-light-neutral-translucent-300);
     }
 }

package/skeleton/esm/Component.d.ts

@@ -18,6 +18,10 @@ type SkeletonProps = {
      * Дополнительные инлайн стили
      */
     style?: React.CSSProperties;
+    /**
+     * Включает размытие фона
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/skeleton/esm/Component.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"skeleton__component_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy","gradient":"skeleton__gradient_9mjjy"};
+var styles = {"component":"skeleton__component_9mjjy","allowBackdropBlur":"skeleton__allowBackdropBlur_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy"};
 require('./index.css');
 
 var Skeleton = function (_a) {
     var _b;
-    var visible = _a.visible, _c = _a.animate, animate = _c === void 0 ? true : _c, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, style = _a.style;
+    var visible = _a.visible, _c = _a.animate, animate = _c === void 0 ? true : _c, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, style = _a.style, allowBackdropBlur = _a.allowBackdropBlur;
     if (visible) {
-        return (React.createElement("div", { className: cn(styles.component, (_b = {}, _b[styles.animate] = animate, _b), className), style: style, "data-test-id": dataTestId }, children));
+        return (React.createElement("div", { className: cn(styles.component, (_b = {},
+                _b[styles.animate] = animate,
+                _b[styles.allowBackdropBlur] = allowBackdropBlur,
+                _b), className), style: style, "data-test-id": dataTestId }, children));
     }
     return (React.createElement("div", { "data-test-id": dataTestId, className: className, style: style }, children));
 };

package/skeleton/esm/index.css

@@ -20,11 +20,8 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: none;
-
-    /* experimental animation switcher */
-    --skeleton-gradient-animation-display: block;
-    --skeleton-bg-animation-display: none;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-bg-animation-display: block;
     --skeleton-bg-animation-color: transparent;
 } .skeleton__component_9mjjy {
     position: relative;
@@ -33,13 +30,14 @@
     color: transparent;
     border-radius: var(--skeleton-border-radius);
     overflow: hidden;
-    -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-            backdrop-filter: var(--skeleton-backdrop-filter);
     background: var(--skeleton-default-color);
 
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
-} .skeleton__component_9mjjy > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black)
+} .skeleton__component_9mjjy.skeleton__allowBackdropBlur_9mjjy {
+        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
+                backdrop-filter: var(--skeleton-backdrop-filter);
+    } .skeleton__component_9mjjy > * {
     visibility: hidden;
 } .skeleton__component_9mjjy:before {
     content: '';
@@ -62,42 +60,11 @@
     .skeleton__animate_9mjjy:before {
         opacity: 0.4;
     }
-} .skeleton__animate_9mjjy:after {
-    display: var(--skeleton-gradient-animation-display);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 500%;
-    height: 100%;
-    transform: translateX(-80%);
-    animation-name: skeleton__gradient_9mjjy;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-image: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0) 40%,
-        rgba(0, 0, 0, 0.05) 50%,
-        rgba(0, 0, 0, 0) 60%,
-        rgba(0, 0, 0, 0)
-    );
-} @keyframes skeleton__gradient_9mjjy {
-    0% {
-        transform: translateX(-80%);
-    }
-    67% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(0);
-    }
 } @keyframes skeleton__background_9mjjy {
     0% {
-        background: rgb(182, 188, 195);
+        background: var(--color-light-neutral-translucent-100);
     }
     100% {
-        background: rgb(198, 205, 214);
+        background: var(--color-light-neutral-translucent-300);
     }
 }

package/skeleton/index.css

@@ -20,11 +20,8 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: none;
-
-    /* experimental animation switcher */
-    --skeleton-gradient-animation-display: block;
-    --skeleton-bg-animation-display: none;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-bg-animation-display: block;
     --skeleton-bg-animation-color: transparent;
 } .skeleton__component_9mjjy {
     position: relative;
@@ -33,13 +30,14 @@
     color: transparent;
     border-radius: var(--skeleton-border-radius);
     overflow: hidden;
-    -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-            backdrop-filter: var(--skeleton-backdrop-filter);
     background: var(--skeleton-default-color);
 
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
-} .skeleton__component_9mjjy > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black)
+} .skeleton__component_9mjjy.skeleton__allowBackdropBlur_9mjjy {
+        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
+                backdrop-filter: var(--skeleton-backdrop-filter);
+    } .skeleton__component_9mjjy > * {
     visibility: hidden;
 } .skeleton__component_9mjjy:before {
     content: '';
@@ -62,42 +60,11 @@
     .skeleton__animate_9mjjy:before {
         opacity: 0.4;
     }
-} .skeleton__animate_9mjjy:after {
-    display: var(--skeleton-gradient-animation-display);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 500%;
-    height: 100%;
-    transform: translateX(-80%);
-    animation-name: skeleton__gradient_9mjjy;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-image: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0) 40%,
-        rgba(0, 0, 0, 0.05) 50%,
-        rgba(0, 0, 0, 0) 60%,
-        rgba(0, 0, 0, 0)
-    );
-} @keyframes skeleton__gradient_9mjjy {
-    0% {
-        transform: translateX(-80%);
-    }
-    67% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(0);
-    }
 } @keyframes skeleton__background_9mjjy {
     0% {
-        background: rgb(182, 188, 195);
+        background: var(--color-light-neutral-translucent-100);
     }
     100% {
-        background: rgb(198, 205, 214);
+        background: var(--color-light-neutral-translucent-300);
     }
 }

package/skeleton/modern/Component.d.ts

@@ -18,6 +18,10 @@ type SkeletonProps = {
      * Дополнительные инлайн стили
      */
     style?: React.CSSProperties;
+    /**
+     * Включает размытие фона
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/skeleton/modern/Component.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"skeleton__component_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy","gradient":"skeleton__gradient_9mjjy"};
+const styles = {"component":"skeleton__component_9mjjy","allowBackdropBlur":"skeleton__allowBackdropBlur_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy"};
 require('./index.css');
 
-const Skeleton = ({ visible, animate = true, className, dataTestId, children, style, }) => {
+const Skeleton = ({ visible, animate = true, className, dataTestId, children, style, allowBackdropBlur, }) => {
     if (visible) {
-        return (React.createElement("div", { className: cn(styles.component, { [styles.animate]: animate }, className), style: style, "data-test-id": dataTestId }, children));
+        return (React.createElement("div", { className: cn(styles.component, {
+                [styles.animate]: animate,
+                [styles.allowBackdropBlur]: allowBackdropBlur,
+            }, className), style: style, "data-test-id": dataTestId }, children));
     }
     return (React.createElement("div", { "data-test-id": dataTestId, className: className, style: style }, children));
 };

package/skeleton/modern/index.css

@@ -20,11 +20,8 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: none;
-
-    /* experimental animation switcher */
-    --skeleton-gradient-animation-display: block;
-    --skeleton-bg-animation-display: none;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-bg-animation-display: block;
     --skeleton-bg-animation-color: transparent;
 } .skeleton__component_9mjjy {
     position: relative;
@@ -33,13 +30,14 @@
     color: transparent;
     border-radius: var(--skeleton-border-radius);
     overflow: hidden;
-    -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-            backdrop-filter: var(--skeleton-backdrop-filter);
     background: var(--skeleton-default-color);
 
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
-} .skeleton__component_9mjjy > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black)
+} .skeleton__component_9mjjy.skeleton__allowBackdropBlur_9mjjy {
+        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
+                backdrop-filter: var(--skeleton-backdrop-filter);
+    } .skeleton__component_9mjjy > * {
     visibility: hidden;
 } .skeleton__component_9mjjy:before {
     content: '';
@@ -62,42 +60,11 @@
     .skeleton__animate_9mjjy:before {
         opacity: 0.4;
     }
-} .skeleton__animate_9mjjy:after {
-    display: var(--skeleton-gradient-animation-display);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 500%;
-    height: 100%;
-    transform: translateX(-80%);
-    animation-name: skeleton__gradient_9mjjy;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-image: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0) 40%,
-        rgba(0, 0, 0, 0.05) 50%,
-        rgba(0, 0, 0, 0) 60%,
-        rgba(0, 0, 0, 0)
-    );
-} @keyframes skeleton__gradient_9mjjy {
-    0% {
-        transform: translateX(-80%);
-    }
-    67% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(0);
-    }
 } @keyframes skeleton__background_9mjjy {
     0% {
-        background: rgb(182, 188, 195);
+        background: var(--color-light-neutral-translucent-100);
     }
     100% {
-        background: rgb(198, 205, 214);
+        background: var(--color-light-neutral-translucent-300);
     }
 }

package/status-badge/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/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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -34,67 +22,9 @@ var colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-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.component, className, styles["size-".concat(size)], colorStyles[colors].component, colorStyles[colors][view]), "data-test-id": dataTestId },
         React__default.default.createElement(Icon, null)));
 };

package/status-badge/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/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/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 };