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

package/select/modern/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,6 +1,6 @@
 import 'react';
 import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-5ccdb908.js';
+export { O as OptionsListWithApply } from '../../../hook-46a9009f.js';
 import './footer/Component.js';
 import './header/Component.js';
 import 'react-merge-refs';

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-5ccdb908";
+export * from "../../../hook-46a9009f";

package/select/modern/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-5ccdb908.js';
+export { O as OptionsListWithApply } from '../../../hook-46a9009f.js';
 import 'react';
 import '../../../utils.js';
 import '../../../../../shared/modern';

package/select/modern/shared/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-5ccdb908.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-46a9009f.js';
 export { defaultAccessor, defaultFilterFn, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
 export { Option } from '../components/option/Component.js';
 export { BaseOption } from '../components/base-option/Component.js';

package/select/presets/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-10a14b43.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-5f6e7b13.js');
 
 
 

package/select/presets/useSelectWithApply/hook.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-10a14b43.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-5f6e7b13.js');
 
 
 

package/select/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-10a14b43.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-5f6e7b13.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

package/select/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-10a14b43";
+export * from "../../../hook-5f6e7b13";

package/select/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-10a14b43.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-5f6e7b13.js');
 
 
 

package/select/shared/index.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-10a14b43.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-5f6e7b13.js');
 var utils = require('../utils.js');
 var components_option_Component = require('../components/option/Component.js');
 var components_baseOption_Component = require('../components/base-option/Component.js');

package/shared/cssm/index.d.ts

@@ -8,4 +8,3 @@ export * from "./browser";
 export * from "./hooks/index";
 export * from "./os";
 export * from "./dom";
-export * from "./exhaustiveCheck";

package/shared/cssm/index.js

@@ -10,7 +10,6 @@ var browser = require('./browser.js');
 var hooks_index = require('./hooks/index.js');
 var os = require('./os.js');
 var dom = require('./dom.js');
-var exhaustiveCheck = require('./exhaustiveCheck.js');
 
 
 
@@ -24,4 +23,3 @@ exports.browser = browser.browser;
 exports.hooks = hooks_index.hooks;
 exports.os = os.os;
 exports.dom = dom.dom;
-exports.exhaustiveCheck = exhaustiveCheck.exhaustiveCheck;

package/shared/esm/index.d.ts

@@ -8,4 +8,3 @@ export * from "./browser";
 export * from "./hooks/index";
 export * from "./os";
 export * from "./dom";
-export * from "./exhaustiveCheck";

package/shared/esm/index.js

@@ -8,7 +8,6 @@ export { browser } from './browser.js';
 export { hooks } from './hooks/index.js';
 export { os } from './os.js';
 export { dom } from './dom.js';
-export { exhaustiveCheck } from './exhaustiveCheck.js';
 import './hooks/useCustomWebkitScrollbar.js';
 import 'react';
 import '@alfalab/hooks';

package/shared/index.d.ts

@@ -8,4 +8,3 @@ export * from "./browser";
 export * from "./hooks/index";
 export * from "./os";
 export * from "./dom";
-export * from "./exhaustiveCheck";

package/shared/index.js

@@ -10,7 +10,6 @@ var browser = require('./browser.js');
 var hooks_index = require('./hooks/index.js');
 var os = require('./os.js');
 var dom = require('./dom.js');
-var exhaustiveCheck = require('./exhaustiveCheck.js');
 
 
 
@@ -24,4 +23,3 @@ exports.browser = browser.browser;
 exports.hooks = hooks_index.hooks;
 exports.os = os.os;
 exports.dom = dom.dom;
-exports.exhaustiveCheck = exhaustiveCheck.exhaustiveCheck;

package/shared/modern/index.d.ts

@@ -8,4 +8,3 @@ export * from "./browser";
 export * from "./hooks/index";
 export * from "./os";
 export * from "./dom";
-export * from "./exhaustiveCheck";

package/shared/modern/index.js

@@ -8,7 +8,6 @@ export { browser } from './browser.js';
 export { hooks } from './hooks/index.js';
 export { os } from './os.js';
 export { dom } from './dom.js';
-export { exhaustiveCheck } from './exhaustiveCheck.js';
 import './hooks/useCustomWebkitScrollbar.js';
 import 'react';
 import '@alfalab/hooks';

package/skeleton/Component.d.ts

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

package/skeleton/Component.js

@@ -8,17 +8,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-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__default.default.createElement("div", { className: cn__default.default(styles.component, (_b = {},
-                _b[styles.animate] = animate,
-                _b[styles.allowBackdropBlur] = allowBackdropBlur,
-                _b), className), style: style, "data-test-id": dataTestId }, children));
+        return (React__default.default.createElement("div", { className: cn__default.default(styles.component, (_b = {}, _b[styles.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/Component.d.ts

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

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 };