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

package/skeleton/cssm/Component.js

@@ -12,12 +12,9 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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, allowBackdropBlur = _a.allowBackdropBlur;
+    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;
     if (visible) {
-        return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {},
-                _b[styles__default.default.animate] = animate,
-                _b[styles__default.default.allowBackdropBlur] = allowBackdropBlur,
-                _b), className), style: style, "data-test-id": dataTestId }, children));
+        return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.animate] = animate, _b), className), style: style, "data-test-id": dataTestId }, children));
     }
     return (React__default.default.createElement("div", { "data-test-id": dataTestId, className: className, style: style }, children));
 };

package/skeleton/cssm/index.module.css

@@ -19,8 +19,11 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: blur(20px);
-    --skeleton-bg-animation-display: block;
+    --skeleton-backdrop-filter: none;
+
+    /* experimental animation switcher */
+    --skeleton-gradient-animation-display: block;
+    --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 } .component {
     position: relative;
@@ -29,14 +32,13 @@
     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.allowBackdropBlur {
-        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-                backdrop-filter: var(--skeleton-backdrop-filter);
-    } .component > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+} .component > * {
     visibility: hidden;
 } .component:before {
     content: '';
@@ -59,11 +61,42 @@
     .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: var(--color-light-neutral-translucent-100);
+        background: rgb(182, 188, 195);
     }
     100% {
-        background: var(--color-light-neutral-translucent-300);
+        background: rgb(198, 205, 214);
     }
 }

package/skeleton/esm/Component.d.ts

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

package/skeleton/esm/Component.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"skeleton__component_9mjjy","allowBackdropBlur":"skeleton__allowBackdropBlur_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy"};
+var styles = {"component":"skeleton__component_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy","gradient":"skeleton__gradient_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, allowBackdropBlur = _a.allowBackdropBlur;
+    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;
     if (visible) {
-        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", { className: cn(styles.component, (_b = {}, _b[styles.animate] = animate, _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,8 +20,11 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: blur(20px);
-    --skeleton-bg-animation-display: block;
+    --skeleton-backdrop-filter: none;
+
+    /* experimental animation switcher */
+    --skeleton-gradient-animation-display: block;
+    --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 } .skeleton__component_9mjjy {
     position: relative;
@@ -30,14 +33,13 @@
     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.skeleton__allowBackdropBlur_9mjjy {
-        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-                backdrop-filter: var(--skeleton-backdrop-filter);
-    } .skeleton__component_9mjjy > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+} .skeleton__component_9mjjy > * {
     visibility: hidden;
 } .skeleton__component_9mjjy:before {
     content: '';
@@ -60,11 +62,42 @@
     .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: var(--color-light-neutral-translucent-100);
+        background: rgb(182, 188, 195);
     }
     100% {
-        background: var(--color-light-neutral-translucent-300);
+        background: rgb(198, 205, 214);
     }
 }

package/skeleton/index.css

@@ -20,8 +20,11 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: blur(20px);
-    --skeleton-bg-animation-display: block;
+    --skeleton-backdrop-filter: none;
+
+    /* experimental animation switcher */
+    --skeleton-gradient-animation-display: block;
+    --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 } .skeleton__component_9mjjy {
     position: relative;
@@ -30,14 +33,13 @@
     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.skeleton__allowBackdropBlur_9mjjy {
-        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-                backdrop-filter: var(--skeleton-backdrop-filter);
-    } .skeleton__component_9mjjy > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+} .skeleton__component_9mjjy > * {
     visibility: hidden;
 } .skeleton__component_9mjjy:before {
     content: '';
@@ -60,11 +62,42 @@
     .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: var(--color-light-neutral-translucent-100);
+        background: rgb(182, 188, 195);
     }
     100% {
-        background: var(--color-light-neutral-translucent-300);
+        background: rgb(198, 205, 214);
     }
 }

package/skeleton/modern/Component.d.ts

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

package/skeleton/modern/Component.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"skeleton__component_9mjjy","allowBackdropBlur":"skeleton__allowBackdropBlur_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy"};
+const styles = {"component":"skeleton__component_9mjjy","animate":"skeleton__animate_9mjjy","background":"skeleton__background_9mjjy","gradient":"skeleton__gradient_9mjjy"};
 require('./index.css');
 
-const Skeleton = ({ visible, animate = true, className, dataTestId, children, style, allowBackdropBlur, }) => {
+const Skeleton = ({ visible, animate = true, className, dataTestId, children, style, }) => {
     if (visible) {
-        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", { className: cn(styles.component, { [styles.animate]: animate }, 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,8 +20,11 @@
     --skeleton-display: block;
     --skeleton-default-color: var(--color-light-neutral-translucent-100);
     --skeleton-border-radius: var(--border-radius-m);
-    --skeleton-backdrop-filter: blur(20px);
-    --skeleton-bg-animation-display: block;
+    --skeleton-backdrop-filter: none;
+
+    /* experimental animation switcher */
+    --skeleton-gradient-animation-display: block;
+    --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 } .skeleton__component_9mjjy {
     position: relative;
@@ -30,14 +33,13 @@
     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.skeleton__allowBackdropBlur_9mjjy {
-        -webkit-backdrop-filter: var(--skeleton-backdrop-filter);
-                backdrop-filter: var(--skeleton-backdrop-filter);
-    } .skeleton__component_9mjjy > * {
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+} .skeleton__component_9mjjy > * {
     visibility: hidden;
 } .skeleton__component_9mjjy:before {
     content: '';
@@ -60,11 +62,42 @@
     .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: var(--color-light-neutral-translucent-100);
+        background: rgb(182, 188, 195);
     }
     100% {
-        background: var(--color-light-neutral-translucent-300);
+        background: rgb(198, 205, 214);
     }
 }

package/status-badge/Component.d.ts

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

package/status-badge/Component.js

@@ -2,7 +2,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var hooks_useStatusBadgeIcon = require('./hooks/useStatusBadgeIcon.js');
+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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -22,9 +34,67 @@ 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, customIcons = _a.customIcons;
-    var Icon = hooks_useStatusBadgeIcon.useStatusBadgeIcon(view, size, customIcons).Icon;
+    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];
     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/cssm/Component.d.ts

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

package/status-badge/cssm/Component.js

@@ -2,7 +2,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var hooks_useStatusBadgeIcon = require('./hooks/useStatusBadgeIcon.js');
+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 defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
@@ -19,9 +31,67 @@ 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, customIcons = _a.customIcons;
-    var Icon = hooks_useStatusBadgeIcon.useStatusBadgeIcon(view, size, customIcons).Icon;
+    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];
     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/index.d.ts

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