@gravity-ui/page-constructor 4.3.0 → 4.3.12-alpha.3

package/build/cjs/sub-blocks/PriceDetailed/schema.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PriceDetailedBlock = void 0;
 const common_1 = require("../../schema/validators/common");
+const event_1 = require("../../schema/validators/event");
 const utils_1 = require("../../schema/validators/utils");
 const PriceDetailedDetailsType = ['marked-list', 'settings'];
 const PriceDetailedDescriptionColor = ['cornflower', 'black'];
@@ -137,7 +138,16 @@ const PriceItem = {
     type: 'object',
     additionalProperties: false,
     required: ['title', 'description'],
-    properties: Object.assign(Object.assign({}, PriceDetailsProps), PriceDescriptionProps),
+    properties: Object.assign(Object.assign(Object.assign({}, PriceDetailsProps), PriceDescriptionProps), { analyticsEvents: {
+            oneOf: [
+                Object.assign(Object.assign({}, event_1.AnalyticsEventSchema), { optionName: 'single' }),
+                {
+                    type: 'array',
+                    items: event_1.AnalyticsEventSchema,
+                    optionName: 'list',
+                },
+            ],
+        } }),
 };
 exports.PriceDetailedBlock = {
     'price-detailed': {

package/build/cjs/sub-blocks/Quote/Quote.css

@@ -31,9 +31,6 @@ unpredictable css rules order in build */
 .pc-quote_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
-.pc-quote_border_line, .pc-quote_border_none {
-  cursor: default;
-}
 @media (min-width: 577px) {
   .slick-slide:not(.slick-active) .pc-quote {
     box-shadow: none;

package/build/cjs/text-transform/common.d.ts

@@ -1,13 +1,18 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, options: {
+    plugins: MarkdownItPluginCb[];
+}) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, options?: {
+    plugins?: MarkdownItPluginCb[];
+}): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

package/build/cjs/text-transform/common.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typografTransformer = exports.yfmTransformer = exports.createItemsParser = void 0;
+const tslib_1 = require("tslib");
+const plugins_1 = tslib_1.__importDefault(require("@doc-tools/transform/lib/plugins"));
 const utils_1 = require("./utils");
 const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
     if (!item) {
@@ -20,8 +22,12 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
     }
 });
 exports.createItemsParser = createItemsParser;
-function yfmTransformer(lang, content) {
-    const { html } = (0, utils_1.fullTransform)(content, { lang });
+function yfmTransformer(lang, content, options = {}) {
+    const { plugins = [] } = options;
+    const { html } = (0, utils_1.fullTransform)(content, {
+        lang,
+        plugins: [...plugins_1.default, ...plugins],
+    });
     return html;
 }
 exports.yfmTransformer = yfmTransformer;

package/build/cjs/text-transform/config.js

@@ -125,7 +125,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/build/cjs/text-transform/transformers.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
 export type ContentVariables = Record<string, string>;
@@ -9,6 +10,7 @@ export type ContentTransformerProps = {
         lang: Lang;
         customConfig?: {};
         vars?: ContentVariables;
+        plugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/build/cjs/text-transform/transformers.js

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentTransformer = void 0;
 const tslib_1 = require("tslib");
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const config_1 = require("./config");
 const filter_1 = require("./filter");
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, options = {}) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
+    const { plugins = [] } = options;
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, plugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, plugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -23,7 +22,9 @@ function transformBlock(lang, blocksConfig, block) {
         const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
         configs.forEach((transformConfig) => {
             const { fields, transformer: transformerRaw, parser } = transformConfig;
-            const transformer = transformerRaw.bind(null, lang);
+            const transformer = (content) => 
+            // eslint-disable-next-line no-useless-call
+            transformerRaw.call(null, lang, content, { plugins });
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -47,9 +48,11 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, plugins = [] } = options;
     const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, {
+        plugins,
+    });
     return {
         blocks: transformedBlocks,
     };

package/build/cjs/utils/blocks.d.ts

@@ -2,12 +2,9 @@ import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
 export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
-export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
-export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
-    [x: string]: any;
-};
-export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
-export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
+export declare const getCustomItems: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => {};
+export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => string[];
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getQaAttrubutes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;

package/build/cjs/utils/blocks.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+const lodash_1 = require("lodash");
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -39,6 +40,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -62,23 +64,18 @@ function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }
 exports.getBlockKey = getBlockKey;
-const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
-    ...Object.keys(blocks),
-    ...Object.keys(headers),
-];
-exports.getCustomBlockTypes = getCustomBlockTypes;
-const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
-exports.getCustomItems = getCustomItems;
-const getCustomSubBlockTypes = (customBlocks = {}) => {
-    const { subBlocks = {} } = customBlocks;
-    return Object.keys(subBlocks);
+const getCustomItems = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return Object.assign(result, customBlocks[type] || {});
+    }, {});
 };
-exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
-const getCustomHeaderTypes = (customBlocks = {}) => {
-    const { headers = {} } = customBlocks;
-    return Object.keys(headers);
+exports.getCustomItems = getCustomItems;
+const getCustomTypes = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return result.concat(Object.keys(customBlocks[type] || {}));
+    }, []);
 };
-exports.getCustomHeaderTypes = getCustomHeaderTypes;
+exports.getCustomTypes = getCustomTypes;
 const getShareUrlWithParams = (url, params = {}) => {
     const result = new URL(url);
     Object.entries(params).forEach(([name, value]) => {
@@ -125,3 +122,15 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getQaAttrubutes = (qa, ...customKeys) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat((0, lodash_1.flatten)(customKeys));
+        keys.forEach((key) => {
+            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+        });
+        attributes.default = qa;
+    }
+    return attributes;
+};
+exports.getQaAttrubutes = getQaAttrubutes;

package/build/cjs/utils/cn.d.ts

@@ -1,4 +1,4 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "pc-";
-export type CnBlock = ReturnType<typeof blockOrigin>;
-export declare function block(name: string): CnBlock;
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export type CnBlock = ReturnType<typeof cn>;

package/build/cjs/utils/cn.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.NAMESPACE = void 0;
-const tslib_1 = require("tslib");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+exports.block = exports.cn = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
 exports.NAMESPACE = 'pc-';
-function block(name) {
-    return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
-}
-exports.block = block;
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/build/esm/blocks/CardLayout/CardLayout.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CardLayoutBlockProps as CardLayoutBlockParams, WithChildren } from '../../models';
+import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps, WithChildren } from '../../models';
 import './CardLayout.css';
-export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>>;
+export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>> & ClassNameProps;
 declare const CardLayout: React.FC<CardLayoutBlockProps>;
 export default CardLayout;

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -9,7 +9,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = block('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, }) => (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
     (title || description) && React.createElement(Title, { title: title, subtitle: description }),
     React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 export default CardLayout;

package/build/esm/blocks/ContentLayout/schema.d.ts

@@ -15,6 +15,25 @@ export declare const ContentLayoutBlock: {
                         type: string;
                         pattern: string;
                     };
+                    style: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            backgroundColor: {
+                                type: string;
+                            };
+                            height: {
+                                type: string[];
+                            };
+                            width: {
+                                type: string[];
+                            };
+                            color: {
+                                type: string;
+                            };
+                        };
+                    };
                     alt: {
                         type: string;
                         contentType: string;
@@ -153,6 +172,25 @@ export declare const ContentLayoutBlock: {
                             type: string;
                             pattern: string;
                         };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
                         alt: {
                             type: string;
                             contentType: string;

package/build/esm/blocks/Header/Header.css

@@ -75,10 +75,6 @@ unpredictable css rules order in build */
 }
 .pc-header-block__description {
   margin-top: 16px;
-  font-weight: normal;
-  font-size: var(--g-text-caption-2-font-size);
-  line-height: var(--g-text-caption-2-line-height);
-  margin-block-end: var(--g-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
@@ -170,9 +166,7 @@ unpredictable css rules order in build */
 .pc-header-block__overtitle {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
-  margin-block-start: var(--g-text-body-3-line-height);
   margin-bottom: 8px;
-  font-weight: 400;
 }
 .pc-header-block__overtitle a {
   outline: none;

package/build/esm/blocks/Icons/Icons.js

@@ -1,6 +1,7 @@
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment, useCallback, useContext } from 'react';
 import { Image, Title } from '../../components';
 import { LocationContext } from '../../context/locationContext';
+import { useAnalytics } from '../../hooks';
 import { block, getLinkProps } from '../../utils';
 import './Icons.css';
 const b = block('icons-block');
@@ -9,11 +10,16 @@ const getItemContent = (item) => (React.createElement(Fragment, null,
     React.createElement("p", { className: b('text') }, item.text)));
 const Icons = ({ title, size = 's', items }) => {
     const { hostname } = useContext(LocationContext);
+    const handleAnalytics = useAnalytics();
+    const onClick = useCallback(({ analyticsEvents, url }) => {
+        handleAnalytics(analyticsEvents, { url });
+    }, [handleAnalytics]);
     return (React.createElement("div", { className: b({ size }) },
         title && React.createElement(Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
         items.map((item) => {
             const itemContent = getItemContent(item);
-            return item.url ? (React.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, getLinkProps(item.url, hostname)), itemContent)) : (React.createElement("div", { className: b('item'), key: item.url }, itemContent));
+            const { url, text } = item;
+            return url ? (React.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, getLinkProps(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (React.createElement("div", { className: b('item'), key: url }, itemContent));
         })));
 };
 export default Icons;

package/build/esm/blocks/Icons/schema.d.ts

@@ -29,6 +29,87 @@ export declare const IconsProps: {
                         type: string;
                     };
                 };
+                analyticsEvents: {
+                    oneOf: ({
+                        optionName: string;
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                    })[];
+                };
             };
         };
         animated: {
@@ -96,6 +177,87 @@ export declare const IconsBlock: {
                             type: string;
                         };
                     };
+                    analyticsEvents: {
+                        oneOf: ({
+                            optionName: string;
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                    context: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                        })[];
+                    };
                 };
             };
             animated: {

package/build/esm/blocks/Icons/schema.js

@@ -1,4 +1,5 @@
 import { AnimatableProps, BlockBaseProps } from '../../schema/validators/common';
+import { AnalyticsEventSchema } from '../../schema/validators/event';
 export const IconsProps = {
     additionalProperties: false,
     required: ['size', 'items'],
@@ -27,6 +28,16 @@ export const IconsProps = {
                         type: 'string',
                     },
                 },
+                analyticsEvents: {
+                    oneOf: [
+                        Object.assign(Object.assign({}, AnalyticsEventSchema), { optionName: 'single' }),
+                        {
+                            type: 'array',
+                            items: AnalyticsEventSchema,
+                            optionName: 'list',
+                        },
+                    ],
+                },
             },
         } }),
 };

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import { block } from '../../../utils';
+import i18n from '../i18n';
 import './Arrow.css';
 const b = block('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
-    React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
+    React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type), "aria-label": i18n(`arrow-${type}`) },
         React.createElement("span", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;

package/build/esm/blocks/Slider/Slider.css

@@ -134,6 +134,7 @@ unpredictable css rules order in build */
   justify-content: center;
 }
 .pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__accessible-bar,
 .pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
@@ -155,13 +156,15 @@ unpredictable css rules order in build */
 .pc-SliderBlock__dot_active {
   background-color: var(--g-color-line-generic-active);
 }
-.pc-SliderBlock__bar {
+.pc-SliderBlock__bar, .pc-SliderBlock__accessible-bar {
   position: absolute;
   top: 12px;
   left: 0;
   width: 24px;
   height: 8px;
   border-radius: var(--pc-border-radius);
+}
+.pc-SliderBlock__bar {
   transition: left 0.3s;
   background-color: var(--pc-color-line-generic-active-solid);
 }