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

package/side-panel/esm/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-a9e68775.js';
+import '../../layout.module-0dc6a00f.js';

package/side-panel/esm/components/footer/Component.desktop.js

@@ -7,7 +7,7 @@ import '../../../../shared/esm';
 import '../../Context.js';
 import '../../../../base-modal/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-a9e68775.js';
+import '../../layout.module-0dc6a00f.js';
 
 var styles = {"sticky":"side-panel__sticky_1ro1n","size-500":"side-panel__size-500_1ro1n"};
 require('./desktop.css');

package/side-panel/esm/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/esm';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-a9e68775.js';
+import { l as layoutStyles } from '../../layout.module-0dc6a00f.js';
 import '../../../../base-modal/esm';
 
 var styles = {"footer":"side-panel__footer_hvmaz","sticky":"side-panel__sticky_hvmaz","highlighted":"side-panel__highlighted_hvmaz"};

package/side-panel/esm/components/footer/Component.mobile.js

@@ -6,7 +6,7 @@ import '../../../../shared/esm';
 import '../../Context.js';
 import '../../../../base-modal/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-a9e68775.js';
+import '../../layout.module-0dc6a00f.js';
 
 var styles = {"footer":"side-panel__footer_122es","sticky":"side-panel__sticky_122es"};
 require('./mobile.css');

package/side-panel/esm/desktop/Component.desktop.js

@@ -13,7 +13,7 @@ import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
 import '../../../base-modal/esm';
-import '../layout.module-a9e68775.js';
+import '../layout.module-0dc6a00f.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/esm';
 

package/side-panel/esm/desktop/index.js

@@ -12,7 +12,7 @@ import '../Context.js';
 import '../../../base-modal/esm';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-a9e68775.js';
+import '../layout.module-0dc6a00f.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/esm/index.js

@@ -6,7 +6,7 @@ import '../../shared/esm';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-a9e68775.js';
+import './layout.module-0dc6a00f.js';
 import './components/header/Component.js';
 import '../../navigation-bar/esm';
 import './consts.js';

package/side-panel/esm/mobile/Component.mobile.js

@@ -10,7 +10,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-a9e68775.js';
+import '../layout.module-0dc6a00f.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/esm';
 import '../consts.js';

package/side-panel/esm/mobile/index.js

@@ -9,7 +9,7 @@ import '../../../shared/esm';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-a9e68775.js';
+import '../layout.module-0dc6a00f.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/Component.responsive.js

@@ -7,7 +7,7 @@ import { SidePanelDesktop } from './desktop/Component.desktop.js';
 import { SidePanelMobile } from './mobile/Component.mobile.js';
 import { ResponsiveContext } from './ResponsiveContext.js';
 import 'classnames';
-import './layout.module-d348cc57.js';
+import './layout.module-6f83e451.js';
 import '../../navigation-bar/modern';
 import './consts.js';
 import './Context.js';

package/side-panel/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-d348cc57.js';
+import { l as layoutStyles } from '../../layout.module-6f83e451.js';
 
 const styles = {"component":"side-panel__component_976qi"};
 require('./index.css');

package/side-panel/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-d348cc57.js';
+import '../../layout.module-6f83e451.js';

package/side-panel/modern/components/footer/Component.desktop.js

@@ -6,7 +6,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-d348cc57.js';
+import '../../layout.module-6f83e451.js';
 
 const styles = {"sticky":"side-panel__sticky_1ro1n","size-500":"side-panel__size-500_1ro1n"};
 require('./desktop.css');

package/side-panel/modern/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-d348cc57.js';
+import { l as layoutStyles } from '../../layout.module-6f83e451.js';
 import '../../../../base-modal/modern';
 
 const styles = {"footer":"side-panel__footer_hvmaz","sticky":"side-panel__sticky_hvmaz","highlighted":"side-panel__highlighted_hvmaz"};

package/side-panel/modern/components/footer/Component.mobile.js

@@ -5,7 +5,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-d348cc57.js';
+import '../../layout.module-6f83e451.js';
 
 const styles = {"footer":"side-panel__footer_122es","sticky":"side-panel__sticky_122es"};
 require('./mobile.css');

package/side-panel/modern/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../../../base-modal/modern';
-import '../layout.module-d348cc57.js';
+import '../layout.module-6f83e451.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-d348cc57.js';
+import '../layout.module-6f83e451.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-d348cc57.js';
+import './layout.module-6f83e451.js';
 import './components/header/Component.js';
 import '../../navigation-bar/modern';
 import './consts.js';

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,7 +9,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-d348cc57.js';
+import '../layout.module-6f83e451.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 import '../consts.js';

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-d348cc57.js';
+import '../layout.module-6f83e451.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/skeleton/Component.d.ts

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

package/skeleton/Component.js

@@ -8,14 +8,17 @@ 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","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__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", { 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", { "data-test-id": dataTestId, className: className, style: style }, children));
 };

package/skeleton/cssm/Component.d.ts

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

package/skeleton/cssm/Component.js

@@ -12,9 +12,12 @@ 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;
+    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__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", { 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", { "data-test-id": dataTestId, className: className, style: style }, children));
 };

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