@gravity-ui/page-constructor 5.31.4-alpha.0 → 6.0.0-alpha.1

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

@@ -6,10 +6,26 @@ exports.config = exports.blockHeaderTransformer = void 0;
 const tslib_1 = require("tslib");
 const models_1 = require("../models");
 const common_1 = require("./common");
-function parseTableBlock(transformer, content) {
+function parseTableBlockLegend(transformer, content) {
     const legend = content === null || content === void 0 ? void 0 : content.legend;
     return Object.assign(Object.assign({}, (content || {})), { legend: legend && legend.map((string) => transformer(string)) });
 }
+function parseTableBlockContent(transformer, content) {
+    const legend = content === null || content === void 0 ? void 0 : content.legend;
+    const tableContent = content === null || content === void 0 ? void 0 : content.content;
+    return Object.assign(Object.assign({}, (content || {})), { content: tableContent &&
+            tableContent.map((row, i) => row.map((cell, j) => {
+                if (legend) {
+                    if (i === 0 || j === 0) {
+                        return transformer(cell);
+                    }
+                    return cell;
+                }
+                else {
+                    return transformer(cell);
+                }
+            })) });
+}
 function parseFeatures(transformer, items) {
     return items.map((_a) => {
         var { title, text } = _a, rest = tslib_1.__rest(_a, ["title", "text"]);
@@ -84,8 +100,9 @@ function parseContentLayoutTitle(transformer, content) {
 exports.blockHeaderTransformer = [
     {
         fields: ['title'],
-        transformer: common_1.typografTransformer,
+        transformer: common_1.yfmTransformer,
         parser: parseTitle,
+        renderInline: true,
     },
     {
         fields: ['description'],
@@ -142,26 +159,30 @@ exports.config = {
     ],
     [models_1.SubBlockType.Quote]: [
         {
-            fields: ['text'],
-            transformer: common_1.typografTransformer,
-        },
-        {
-            fields: ['yfmText'],
+            fields: ['text', 'yfmText'],
             transformer: common_1.yfmTransformer,
+            renderInline: true,
         },
     ],
     [models_1.BlockType.ExtendedFeaturesBlock]: [
         ...exports.blockHeaderTransformer,
         {
             fields: ['items'],
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
             parser: (0, common_1.createItemsParser)(['title']),
+            renderInline: true,
         },
         {
             fields: ['items'],
             transformer: common_1.yfmTransformer,
             parser: (0, common_1.createItemsParser)(['text', 'additionalInfo']),
         },
+        {
+            fields: ['items'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['list.text']),
+            renderInline: true,
+        },
     ],
     [models_1.BlockType.PromoFeaturesBlock]: [
         ...exports.blockHeaderTransformer,
@@ -171,7 +192,7 @@ exports.config = {
             parser: parsePromoFeatures,
         },
     ],
-    [models_1.BlockType.SliderBlock]: exports.blockHeaderTransformer,
+    [models_1.BlockType.SliderOldBlock]: exports.blockHeaderTransformer,
     [models_1.BlockType.CompaniesBlock]: exports.blockHeaderTransformer,
     [models_1.BlockType.QuestionsBlock]: [
         {
@@ -191,7 +212,8 @@ exports.config = {
     [models_1.BlockType.BannerBlock]: [
         {
             fields: ['title'],
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
+            renderInline: true,
         },
         {
             fields: ['subtitle'],
@@ -244,7 +266,13 @@ exports.config = {
         {
             fields: ['table'],
             transformer: common_1.yfmTransformer,
-            parser: parseTableBlock,
+            parser: parseTableBlockLegend,
+        },
+        {
+            fields: ['table'],
+            transformer: common_1.yfmTransformer,
+            parser: parseTableBlockContent,
+            renderInline: true,
         },
     ],
     [models_1.BlockType.HeaderSliderBlock]: [
@@ -270,6 +298,11 @@ exports.config = {
             fields: ['description'],
             transformer: common_1.yfmTransformer,
         },
+        {
+            fields: ['overtitle', 'title'],
+            transformer: common_1.yfmTransformer,
+            renderInline: true,
+        },
     ],
     [models_1.BlockType.ContentLayoutBlock]: [
         {
@@ -323,13 +356,20 @@ exports.config = {
     [models_1.SubBlockType.PriceCard]: [
         {
             fields: ['title'],
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
+            renderInline: true,
         },
         {
             fields: ['list'],
             transformer: common_1.yfmTransformer,
             parser: (0, common_1.createItemsParser)(['text']),
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['title']),
+            renderInline: true,
+        },
     ],
     [models_1.BlockType.FormBlock]: [
         {

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

@@ -22,10 +22,10 @@ function transformBlock(lang, blocksConfig, block, plugins) {
     if (blockConfig) {
         const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
         configs.forEach((transformConfig) => {
-            const { fields, transformer: transformerRaw, parser } = transformConfig;
+            const { fields, transformer: transformerRaw, parser, renderInline } = transformConfig;
             const transformer = (content) => 
             // eslint-disable-next-line no-useless-call
-            transformerRaw.call(null, lang, content, { plugins });
+            transformerRaw.call(null, lang, content, { plugins, renderInline });
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {

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

@@ -1,6 +1,13 @@
-import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
+import { ReactNode } from 'react';
+import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TagName, TextSize } from '../models';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
-export declare function hasBlockTag(content: string): boolean;
+type SelectVariantArgs = {
+    block?: boolean;
+    content?: string;
+    children?: ReactNode;
+    tagName?: TagName;
+};
+export declare function selectTagName({ content, children, tagName }: SelectVariantArgs): string;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomItems: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => {};
 export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => string[];
@@ -8,3 +15,4 @@ export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockT
 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>;
+export {};

package/build/cjs/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.selectTagName = exports.getHeaderTag = void 0;
 const tslib_1 = require("tslib");
 const camelCase_1 = tslib_1.__importDefault(require("lodash/camelCase"));
 const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
@@ -57,11 +57,17 @@ function getHeaderTag(size) {
     }
 }
 exports.getHeaderTag = getHeaderTag;
-function hasBlockTag(content) {
+function selectTagName({ content, children, tagName }) {
+    if (!children && tagName) {
+        return tagName;
+    }
+    if (!content) {
+        return 'span';
+    }
     const regex = new RegExp(BLOCK_ELEMENTS_REGEX, 'g');
-    return regex.test(content);
+    return regex.test(content) ? 'div' : 'span';
 }
-exports.hasBlockTag = hasBlockTag;
+exports.selectTagName = selectTagName;
 function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -1,4 +1,4 @@
-.pc-ExtendedFeaturesBlock__item-title {
+.pc-ExtendedFeaturesBlock__item-title.pc-ExtendedFeaturesBlock__item-title {
   margin: 0;
 }
 
@@ -16,28 +16,33 @@ unpredictable css rules order in build */
 .pc-ExtendedFeaturesBlock__item.col {
   padding-right: 32px;
 }
-.pc-ExtendedFeaturesBlock__item-title {
+.pc-ExtendedFeaturesBlock__item-title-container {
+  margin: inherit;
+  display: block;
+  margin-block: 0 8px;
+}
+.pc-ExtendedFeaturesBlock__item-title.pc-ExtendedFeaturesBlock__item-title {
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--g-text-accent-font-weight);
-  display: block;
   position: relative;
   margin-bottom: 8px;
 }
-.pc-ExtendedFeaturesBlock__item-title a {
+.pc-ExtendedFeaturesBlock__item-title.pc-ExtendedFeaturesBlock__item-title a {
   outline: none;
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
-.utilityfocus .pc-ExtendedFeaturesBlock__item-title a:focus {
+.utilityfocus .pc-ExtendedFeaturesBlock__item-title.pc-ExtendedFeaturesBlock__item-title a:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-ExtendedFeaturesBlock__item-title a:hover, .pc-ExtendedFeaturesBlock__item-title a:active {
+.pc-ExtendedFeaturesBlock__item-title.pc-ExtendedFeaturesBlock__item-title a:hover, .pc-ExtendedFeaturesBlock__item-title.pc-ExtendedFeaturesBlock__item-title a:active {
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+
 .pc-ExtendedFeaturesBlock__item-label {
   font-size: var(--g-text-caption-2-font-size);
   line-height: var(--g-text-caption-2-line-height);

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AnimateBlock, HTML, Title } from '../../components/';
+import { AnimateBlock, Title, YFMWrapper } from '../../components/';
 import Image from '../../components/Image/Image';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { useTheme } from '../../context/theme';
@@ -30,12 +30,9 @@ export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DE
                     iconData && (React.createElement("div", { className: b('icon-wrap'), "aria-hidden": true },
                         React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })))),
                     React.createElement("div", { className: b('container') },
-                        itemTitle &&
-                            React.createElement(itemTitleHeadingTag, {
-                                className: b('item-title'),
-                            }, React.createElement(React.Fragment, null,
-                                React.createElement(HTML, null, itemTitle),
-                                label && (React.createElement("span", { className: b('item-label') }, label)))),
+                        itemTitle && (React.createElement(YFMWrapper, { tagName: itemTitleHeadingTag, content: itemTitle, className: b('item-title-container'), contentClassName: b('item-title'), modifiers: {
+                                constructor: true,
+                            } }, label && (React.createElement("span", { className: b('item-label') }, label)))),
                         React.createElement(Content, { text: text, links: itemLinks, size: "s", list: list, colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
             })))));
 };

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

@@ -1,4 +1,4 @@
-.pc-header-block__title {
+.pc-header-block__title.pc-header-block__title {
   margin: 0;
 }
 
@@ -20,16 +20,17 @@ unpredictable css rules order in build */
   position: relative;
   height: 100%;
 }
-.pc-header-block__content_theme_dark {
+.pc-header-block__content_theme_dark.pc-header-block__content_theme_dark {
   --g-color-line-focus: var(--pc-color-line-focus-dark);
 }
-.pc-header-block__content_theme_dark .pc-header-block__title,
-.pc-header-block__content_theme_dark .pc-header-block__overtitle {
+.pc-header-block__content_theme_dark.pc-header-block__content_theme_dark .pc-header-block__title,
+.pc-header-block__content_theme_dark.pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);
 }
-.pc-header-block__content_theme_dark .pc-header-block__description .yfm {
+.pc-header-block__content_theme_dark.pc-header-block__content_theme_dark .pc-header-block__description .yfm {
   color: var(--g-color-text-light-primary);
 }
+
 .pc-header-block__content_vertical-offset {
   margin: 16px 0;
 }
@@ -52,7 +53,7 @@ unpredictable css rules order in build */
   position: relative;
   z-index: 10;
 }
-.pc-header-block__title {
+.pc-header-block__title.pc-header-block__title {
   font-size: var(--g-text-display-4-font-size);
   line-height: var(--g-text-display-4-line-height);
   color: var(--pc-text-header-color);
@@ -60,24 +61,28 @@ unpredictable css rules order in build */
   position: relative;
 }
 @media (max-width: 577px) {
-  .pc-header-block__title {
+  .pc-header-block__title.pc-header-block__title {
     font-size: var(--g-text-display-2-font-size);
     line-height: var(--g-text-display-2-line-height);
   }
 }
-.pc-header-block__title a {
+.pc-header-block__title.pc-header-block__title a {
   outline: none;
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
-.utilityfocus .pc-header-block__title a:focus {
+.utilityfocus .pc-header-block__title.pc-header-block__title a:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-header-block__title a:hover, .pc-header-block__title a:active {
+.pc-header-block__title.pc-header-block__title a:hover, .pc-header-block__title.pc-header-block__title a:active {
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+
+.pc-header-block__title-container {
+  margin: 0;
+}
 .pc-header-block__description {
   margin-top: 16px;
 }

package/build/esm/blocks/Header/Header.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
-import { Button, HTML, Media, RouterLink } from '../../components';
+import { Button, Media, RouterLink } from '../../components';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
@@ -55,11 +55,15 @@ export const HeaderBlock = (props) => {
                                 'vertical-offset': curVerticalOffset,
                             }) },
                             React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
-                                overtitle && (React.createElement("div", { className: b('overtitle') },
-                                    React.createElement(HTML, null, overtitle))),
-                                React.createElement("h1", { className: b('title'), id: titleId },
+                                overtitle && (React.createElement(YFMWrapper, { tagName: "div", className: b('overtitle'), content: overtitle, modifiers: {
+                                        constructor: true,
+                                    } })),
+                                React.createElement(YFMWrapper, { content: title, contentClassName: b('title'), className: b('title-container'), modifiers: {
+                                        constructor: true,
+                                        constructorTheme: textTheme,
+                                    }, tagName: "h1", contentPosition: "end" },
                                     status,
-                                    renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
+                                    renderTitle ? renderTitle(title) : null),
                                 description && (React.createElement("div", { className: b('description', { theme: textTheme }) },
                                     React.createElement(YFMWrapper, { content: description, modifiers: {
                                             constructor: true,

package/build/esm/blocks/HeaderSlider/HeaderSlider.css

@@ -34,13 +34,6 @@ unpredictable css rules order in build */
     padding-right: 32px;
   }
 }
-@media (max-width: 769px) {
-  .pc-header-slider-block.pc-SliderBlock {
-    margin-left: -8px;
-    padding-left: 0;
-    width: calc(100% + 8px);
-  }
-}
 @media (max-width: 577px) {
   .pc-header-slider-block__item-content .pc-header-block__content {
     padding-left: 0;
@@ -49,7 +42,4 @@ unpredictable css rules order in build */
   .pc-header-slider-block__item-content .pc-header-block__container-fluid {
     padding-left: 24px;
   }
-  .pc-header-slider-block .slick-track .slick-slide {
-    max-width: 100%;
-  }
 }

package/build/esm/blocks/HeaderSlider/HeaderSlider.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import React, { useContext } from 'react';
+import { SliderBlock } from '../../blocks';
 import { MobileContext } from '../../context/mobileContext';
 import { SliderType } from '../../models';
 import { block } from '../../utils';
 import Header from '../Header/Header';
-import { SliderBlock } from '../index';
 import './HeaderSlider.css';
 const b = block('header-slider-block');
 export const HeaderSliderBlock = (_a) => {

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

@@ -568,6 +568,9 @@ export declare const HeaderSliderBlock: {
                     };
                 };
             };
+            type: {
+                type: string;
+            };
             dots: {
                 type: string;
             };
@@ -607,11 +610,17 @@ export declare const HeaderSliderBlock: {
             randomOrder: {
                 type: string;
             };
+            adaptive: {
+                type: string;
+            };
             animated: {
                 animated: {
                     type: string;
                 };
             };
+            arrowSize: {
+                type: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;
@@ -651,7 +660,6 @@ export declare const HeaderSliderBlock: {
                     };
                 };
             };
-            type: {};
             when: {
                 type: string;
             };

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -1,4 +1,4 @@
-.pc-QuestionsBlockItem__title {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title {
   margin: 0;
 }
 
@@ -11,45 +11,55 @@ unpredictable css rules order in build */
 .pc-QuestionsBlockItem + .pc-QuestionsBlockItem {
   padding-top: 32px;
 }
-.pc-QuestionsBlockItem__title {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title {
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--g-text-accent-font-weight);
-  position: relative;
-  display: block;
-  width: 100%;
-  padding-right: 24px;
-  text-align: start;
   cursor: pointer;
   border-radius: var(--g-focus-border-radius);
 }
-.pc-QuestionsBlockItem__title:focus {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-QuestionsBlockItem__title a {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a {
   outline: none;
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
-.utilityfocus .pc-QuestionsBlockItem__title a:focus {
+.utilityfocus .pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-QuestionsBlockItem__title a:hover, .pc-QuestionsBlockItem__title a:active {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a:hover, .pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+
+.pc-QuestionsBlockItem__title-container {
+  margin: 0;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-right: 24px;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-QuestionsBlockItem__title-container a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-QuestionsBlockItem__title-container a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-QuestionsBlockItem__title-container a:hover, .pc-QuestionsBlockItem__title-container a:active {
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
@@ -75,4 +85,16 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
   margin-top: 12px;
+}
+.pc-QuestionsBlockItem__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  width: 100%;
 }

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useActionHandlers } from '@gravity-ui/uikit';
-import { Foldable, HTML, ToggleArrow, YFMWrapper } from '../../../components';
+import { Foldable, ToggleArrow, YFMWrapper } from '../../../components';
 import Link from '../../../components/Link/Link';
 import { block } from '../../../utils';
 import { FaqMicrodataValues } from '../models';
@@ -9,9 +9,11 @@ const b = block('QuestionsBlockItem');
 export const QuestionBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
     const { onKeyDown } = useActionHandlers(onClick);
     return (React.createElement("div", { className: b(), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType, role: 'listitem' },
-        React.createElement("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown },
-            React.createElement(HTML, { itemProp: FaqMicrodataValues.QuestionNameProp }, itemTitle),
-            React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
+        React.createElement("button", { className: b('button'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown },
+            React.createElement(YFMWrapper, { tagName: "h3", className: b('title-container'), contentClassName: b('title'), itemProp: FaqMicrodataValues.QuestionNameProp, content: itemTitle, modifiers: {
+                    constructor: true,
+                }, onClick: onClick, tabIndex: 0 },
+                React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') }))),
         React.createElement(Foldable, { isOpened: isOpened },
             React.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType, "aria-hidden": !isOpened },
                 React.createElement(YFMWrapper, { content: itemText, modifiers: {

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

@@ -1,36 +1,25 @@
-.pc-slider-block-arrow__button {
+.pc-slider-block-arrow__inner {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-block-arrow__button:hover {
+.pc-slider-block-arrow__inner:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__button, .pc-slider-block-arrow {
+.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__inner, .pc-slider-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-block-arrow {
-  width: 42px;
-  height: 42px;
-  cursor: pointer;
-}
 @media (max-width: 576px) {
   .pc-slider-block-arrow {
     display: none;
   }
 }
-.pc-slider-block-arrow_type_left {
-  margin-right: 16px;
-}
-.pc-slider-block-arrow_type_left .pc-slider-block-arrow__icon-wrapper {
-  transform: rotate(180deg);
-}
 .pc-slider-block-arrow__button {
   display: inline-block;
   margin: 0;
@@ -41,6 +30,15 @@ unpredictable css rules order in build */
   color: inherit;
   background: none;
   cursor: pointer;
+}
+.pc-slider-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-slider-block-arrow__inner {
   width: 42px;
   height: 42px;
   color: var(--g-color-text-secondary);
@@ -49,17 +47,20 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-block-arrow__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-slider-block-arrow__button:focus:not(:focus-visible) {
-  outline: 0;
+.pc-slider-block-arrow__inner_type_left .pc-slider-block-arrow__icon-wrapper {
+  transform: rotate(180deg);
 }
-.pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
+.pc-slider-block-arrow__inner:hover {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
+.pc-slider-block-arrow__inner_transparent {
+  background-color: transparent;
+  box-shadow: none;
+}
+.pc-slider-block-arrow__inner_transparent:hover {
+  box-shadow: none;
+}
 .pc-slider-block-arrow__icon {
   position: relative;
 }

package/build/esm/blocks/Slider/Arrow/Arrow.d.ts

@@ -1,10 +1,13 @@
+import React from 'react';
 import { ClassNameProps } from '../../../models';
 import './Arrow.css';
 export type ArrowType = 'left' | 'right';
 export interface ArrowProps {
     type: ArrowType;
-    handleClick?: (direction: ArrowType) => void;
+    transparent?: boolean;
+    onClick?: () => void;
     size?: number;
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
-declare const Arrow: ({ type, handleClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+declare const Arrow: ({ type, transparent, onClick, className, size, extraProps, }: ArrowProps & ClassNameProps) => JSX.Element;
 export default Arrow;