@gravity-ui/page-constructor 1.7.0-alpha.7 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.7.1](https://github.com/gravity-ui/page-constructor/compare/v1.7.0...v1.7.1) (2022-11-29)
+
+
+### Bug Fixes
+
+* **ExtendedFeatures:** add props ([6254d62](https://github.com/gravity-ui/page-constructor/commit/6254d62b9ceded154d0fdcded9a554fd33772d13))
+* storybook content ([b98eccc](https://github.com/gravity-ui/page-constructor/commit/b98ecccc96cfba2376552e4c9314a559913455d9))
+
 ## [1.7.0](https://github.com/gravity-ui/page-constructor/compare/v1.6.1...v1.7.0) (2022-11-10)
 
 

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -21,7 +21,7 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement(components_1.BlockHeader, { title: title, description: description, className: b('header') }),
         react_1.default.createElement("div", { className: b('items') },
-            react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, links, label, icon }) => {
+            react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, links, label, icon, buttons, additionalInfo, }) => {
                 const itemLinks = links || [];
                 const iconThemed = icon && (0, utils_1.getThemedValue)(icon, theme);
                 const iconData = iconThemed && (0, utils_2.getMediaImage)(iconThemed);
@@ -34,7 +34,7 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
                         itemTitle && (react_1.default.createElement("h5", { className: b('item-title') },
                             react_1.default.createElement(components_1.HTML, null, itemTitle),
                             label && (react_1.default.createElement("div", { className: b('item-label') }, label)))),
-                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 } }))));
+                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
             })))));
 };
 exports.ExtendedFeaturesBlock = ExtendedFeaturesBlock;

package/build/cjs/blocks/Tabs/Tabs.css

@@ -1,94 +1,68 @@
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
+.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
   margin: 0;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-tabs-block__block-title {
+.pc-TabsBlock__block-title {
   margin-bottom: 12px;
 }
-.pc-tabs-block__block-title_centered {
-  margin: 0 auto 12px;
-  text-align: center;
-}
-.pc-tabs-block__tabs_centered {
-  display: flex;
-  justify-content: center;
-}
-.pc-tabs-block__row_reverse {
-  flex-direction: row-reverse;
+.pc-TabsBlock__tabs.pc-TabsBlock__tabs {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  margin-bottom: 32px;
 }
-.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
-  margin-right: 32px;
-  margin-left: 0;
-}
-.pc-tabs-block__image {
+
+.pc-TabsBlock__image {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
 }
-.pc-tabs-block__image, .pc-tabs-block__media {
+.pc-TabsBlock__image, .pc-TabsBlock__media {
   box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
 }
-.pc-tabs-block__caption {
+.pc-TabsBlock__caption {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
   margin: 12px 0 0;
   color: var(--yc-color-text-secondary);
 }
-.pc-tabs-block__content {
+.pc-TabsBlock__content {
   display: flex;
   flex-direction: column;
 }
-.pc-tabs-block__content_centered {
-  margin: 0 auto;
-}
-.pc-tabs-block__col_centered {
-  margin: 0 auto;
-}
-.pc-tabs-block__content-wrapper_margin {
+.pc-TabsBlock__content-wrapper_margin {
   margin: 24px 0 0 32px;
 }
-.pc-tabs-block__content-title {
+.pc-TabsBlock__content-title {
   margin: 0 auto 12px;
 }
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
+.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
 }
 
+.pc-TabsBlock__tabs, .pc-TabsBlock__link {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
 @media (max-width: 769px) {
-  .pc-tabs-block__tabs {
-    display: flex;
-    overflow: auto;
-    margin-left: -24px;
-    margin-right: -24px;
-    padding-left: 24px;
-    padding-right: 16px;
-  }
-  .pc-tabs-block__content-wrapper_margin {
+  .pc-TabsBlock__content-wrapper_margin {
     margin: 0 0 32px 0;
   }
-  .pc-tabs-block__row_reverse {
-    flex-direction: column-reverse;
-  }
-  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
-    margin-top: 32px;
-    padding-bottom: 0;
-  }
 }
 @media (min-width: 769px) {
-  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
+  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__media {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__media {
+  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__media {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -96,12 +70,12 @@ unpredictable css rules order in build */
   }
 }
 @media (min-width: 769px) {
-  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__image {
+  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__image {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__image {
+  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__image {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

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

@@ -1,3 +1,3 @@
 import { TabsBlockProps } from '../../models';
-export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -3,55 +3,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
+const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
 const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
 const BlockHeader_1 = (0, tslib_1.__importDefault)(require("../../components/BlockHeader/BlockHeader"));
 const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components/FullscreenImage/FullscreenImage"));
 const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
+const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const utils_2 = require("../../components/Media/Image/utils");
-const ButtonTabs_1 = (0, tslib_1.__importDefault)(require("../../components/ButtonTabs/ButtonTabs"));
-const sub_blocks_1 = require("../../sub-blocks");
-const b = (0, utils_1.block)('tabs-block');
-const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+const b = (0, utils_1.block)('TabsBlock');
+const TabsBlock = ({ items, title, description, animated }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
     const activeTabData = items.find(({ tabName }) => tabName === activeTab);
-    const isReverse = direction === 'content-media';
     let imageProps;
     if (activeTabData) {
         const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
         imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
-    const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
-    const textContent = activeTabData && showText && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
-        react_1.default.createElement("div", { className: b('content-wrapper', {
-                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
-            }) },
-            react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
-                    ...(activeTabData.link ? [activeTabData.link] : []),
-                    ...(activeTabData.links || []),
-                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
-    const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
-            all: grid_1.GridColumnOrderClasses.Last,
-            md: grid_1.GridColumnOrderClasses.First,
-        }, className: b('col', { centered: centered }) },
-        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
-        imageProps && (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
-            (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption))))));
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }), colSizes: centered ? { all: 12 } : { all: 12, sm: 8 } }),
-        react_1.default.createElement(grid_1.Row, null,
-            react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
-                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
-        activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
-            mediaContent,
-            textContent))));
+        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title') }),
+        react_1.default.createElement(uikit_1.Tabs, { className: b('tabs'), items: tabs, activeTab: activeTab, onSelectTab: setActiveTab, size: "l" }),
+        activeTabData && (react_1.default.createElement(grid_1.Row, null,
+            showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
+                    all: grid_1.GridColumnOrderClasses.Last,
+                    md: grid_1.GridColumnOrderClasses.First,
+                } },
+                (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
+                imageProps && (react_1.default.createElement(react_1.Fragment, null,
+                    react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
+                    activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
+            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
+                react_1.default.createElement("div", { className: b('content-wrapper', {
+                        margin: Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps),
+                    }) },
+                    react_1.default.createElement("h4", { className: b('content-title') },
+                        react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.title, modifiers: { constructor: true } })),
+                    react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.text, modifiers: { constructor: true } }),
+                    react_1.default.createElement(Links_1.default, { links: [
+                            ...(activeTabData.link ? [activeTabData.link] : []),
+                            ...(activeTabData.links || []),
+                        ], className: b('link') })))))));
 };
 exports.TabsBlock = TabsBlock;
 exports.default = exports.TabsBlock;

package/build/cjs/components/Image/Image.js

@@ -4,8 +4,6 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const constants_1 = require("../../constants");
-const utils_1 = require("../../utils");
-const b = (0, utils_1.block)('Image');
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
@@ -22,7 +20,7 @@ const Image = (props) => {
         disableCompress ||
         imageSrc.endsWith('.svg') ||
         imgLoadingError;
-    return (react_1.default.createElement("picture", { className: b() },
+    return (react_1.default.createElement("picture", null,
         mobile && (react_1.default.createElement(react_1.Fragment, null,
             !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
             react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -53,7 +53,7 @@ const VideoBlock = (props) => {
     }, [src, attributes]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
-            setHeight(ref.current ? Math.floor(getHeight(ref.current.offsetWidth)) : undefined);
+            setHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
         window.addEventListener('resize', updateSize);

package/build/cjs/constructor-items.d.ts

@@ -11,7 +11,7 @@ export declare const blockMap: {
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "security-block": (props: import("./models").SecurityBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
-    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated }: import("./models").TabsBlockProps) => JSX.Element;
     "link-table-block": ({ items, title, description, linkTheme }: import("./models").LinkTableBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -114,14 +114,12 @@ export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
 }
-export interface ExtendedFeaturesItem {
-    title?: string;
-    text?: string;
+export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
+    title: string;
     label?: string;
     icon?: ThemedImage;
     /** @deprecated **/
     link?: LinkProps;
-    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];
@@ -221,21 +219,18 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+export interface TabsBlockItem {
     tabName: string;
-    /**
-     * @deprecated Use array links from ContentBlockProps instead
-     */
+    title: string;
+    text: string;
     link?: LinkProps;
     image?: ThemedImage;
     disableCompress?: boolean;
     caption?: string;
     media?: ThemedMediaProps;
+    links?: LinkProps[];
 }
 export interface TabsBlockProps extends BlockHeaderProps, Animatable {
-    tabsColSizes?: GridColumnSizesType;
-    centered?: boolean;
-    direction?: MediaDirection;
     items: TabsBlockItem[];
 }
 export interface LinkTableBlockProps extends BlockHeaderProps {

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

@@ -23,6 +23,7 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
     }
 });
 exports.createItemsParser = createItemsParser;
+const parseItems = (0, exports.createItemsParser)(['title', 'text']);
 function parseTableBlock(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)) });
@@ -48,13 +49,9 @@ function parseSlider(transformer, block) {
 }
 const parseTitle = (transformer, title) => typeof title === 'object' && 'text' in title
     ? Object.assign(Object.assign({}, title), { text: transformer(title.text) }) : title && transformer(title);
-const parseItemsTitle = (transformer, items) => items.map((_a) => {
-    var { title } = _a, rest = (0, tslib_1.__rest)(_a, ["title"]);
-    return (Object.assign({ title: title && parseTitle(transformer, title) }, rest));
-});
 function parsePriceDetailedBlock(transformer, block) {
     const { priceType } = block;
-    block.items = block.items.map((item) => {
+    const transformedBlockItems = block.items.map((item) => {
         const { description, items: details = [] } = item;
         if (priceType === 'marked-list') {
             item.items = details.map((detail) => {
@@ -71,6 +68,7 @@ function parsePriceDetailedBlock(transformer, block) {
         item.description = transformer(description);
         return item;
     });
+    block.items = transformedBlockItems;
     return block;
 }
 const parseContentLayout = (transformer, content) => {
@@ -228,12 +226,7 @@ const config = {
         {
             fields: ['items'],
             transformer: yfmTransformer,
-            parser: (0, exports.createItemsParser)(['text', 'additionalInfo']),
-        },
-        {
-            fields: ['items'],
-            transformer: typografTransformer,
-            parser: parseItemsTitle,
+            parser: parseItems,
         },
     ],
     [models_1.BlockType.TableBlock]: [

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

@@ -18,7 +18,7 @@ export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DE
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         React.createElement(BlockHeader, { title: title, description: description, className: b('header') }),
         React.createElement("div", { className: b('items') },
-            React.createElement(Row, null, items.map(({ title: itemTitle, text, link, links, label, icon }) => {
+            React.createElement(Row, null, items.map(({ title: itemTitle, text, link, links, label, icon, buttons, additionalInfo, }) => {
                 const itemLinks = links || [];
                 const iconThemed = icon && getThemedValue(icon, theme);
                 const iconData = iconThemed && getMediaImage(iconThemed);
@@ -31,7 +31,7 @@ export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DE
                         itemTitle && (React.createElement("h5", { className: b('item-title') },
                             React.createElement(HTML, null, itemTitle),
                             label && (React.createElement("div", { className: b('item-label') }, label)))),
-                        React.createElement(Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 } }))));
+                        React.createElement(Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
             })))));
 };
 export default ExtendedFeaturesBlock;

package/build/esm/blocks/Tabs/Tabs.css

@@ -1,94 +1,68 @@
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
+.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
   margin: 0;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-tabs-block__block-title {
+.pc-TabsBlock__block-title {
   margin-bottom: 12px;
 }
-.pc-tabs-block__block-title_centered {
-  margin: 0 auto 12px;
-  text-align: center;
-}
-.pc-tabs-block__tabs_centered {
-  display: flex;
-  justify-content: center;
-}
-.pc-tabs-block__row_reverse {
-  flex-direction: row-reverse;
+.pc-TabsBlock__tabs.pc-TabsBlock__tabs {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  margin-bottom: 32px;
 }
-.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
-  margin-right: 32px;
-  margin-left: 0;
-}
-.pc-tabs-block__image {
+
+.pc-TabsBlock__image {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
 }
-.pc-tabs-block__image, .pc-tabs-block__media {
+.pc-TabsBlock__image, .pc-TabsBlock__media {
   box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
 }
-.pc-tabs-block__caption {
+.pc-TabsBlock__caption {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
   margin: 12px 0 0;
   color: var(--yc-color-text-secondary);
 }
-.pc-tabs-block__content {
+.pc-TabsBlock__content {
   display: flex;
   flex-direction: column;
 }
-.pc-tabs-block__content_centered {
-  margin: 0 auto;
-}
-.pc-tabs-block__col_centered {
-  margin: 0 auto;
-}
-.pc-tabs-block__content-wrapper_margin {
+.pc-TabsBlock__content-wrapper_margin {
   margin: 24px 0 0 32px;
 }
-.pc-tabs-block__content-title {
+.pc-TabsBlock__content-title {
   margin: 0 auto 12px;
 }
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
+.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
 }
 
+.pc-TabsBlock__tabs, .pc-TabsBlock__link {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
 @media (max-width: 769px) {
-  .pc-tabs-block__tabs {
-    display: flex;
-    overflow: auto;
-    margin-left: -24px;
-    margin-right: -24px;
-    padding-left: 24px;
-    padding-right: 16px;
-  }
-  .pc-tabs-block__content-wrapper_margin {
+  .pc-TabsBlock__content-wrapper_margin {
     margin: 0 0 32px 0;
   }
-  .pc-tabs-block__row_reverse {
-    flex-direction: column-reverse;
-  }
-  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
-    margin-top: 32px;
-    padding-bottom: 0;
-  }
 }
 @media (min-width: 769px) {
-  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
+  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__media {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__media {
+  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__media {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -96,12 +70,12 @@ unpredictable css rules order in build */
   }
 }
 @media (min-width: 769px) {
-  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__image {
+  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__image {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__image {
+  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__image {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

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

@@ -1,4 +1,4 @@
 import { TabsBlockProps } from '../../models';
 import './Tabs.css';
-export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/esm/blocks/Tabs/Tabs.js

@@ -1,53 +1,51 @@
 import React, { Fragment, useContext, useState } from 'react';
+import { Tabs } from '@gravity-ui/uikit';
 import { block, getThemedValue } from '../../utils';
 import { Row, Col, GridColumnOrderClasses } from '../../grid';
+import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
 import Media from '../../components/Media/Media';
+import Links from '../../components/Link/Links';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { getMediaImage } from '../../components/Media/Image/utils';
-import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
-import { Content } from '../../sub-blocks';
 import './Tabs.css';
-const b = block('tabs-block');
-export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+const b = block('TabsBlock');
+export const TabsBlock = ({ items, title, description, animated }) => {
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
     const { themeValue: theme } = useContext(ThemeValueContext);
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
     const activeTabData = items.find(({ tabName }) => tabName === activeTab);
-    const isReverse = direction === 'content-media';
     let imageProps;
     if (activeTabData) {
         const themedImage = getThemedValue(activeTabData.image, theme);
         imageProps = themedImage && getMediaImage(themedImage);
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
-    const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
-    const textContent = activeTabData && showText && (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
-        React.createElement("div", { className: b('content-wrapper', {
-                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
-            }) },
-            React.createElement(Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
-                    ...(activeTabData.link ? [activeTabData.link] : []),
-                    ...(activeTabData.links || []),
-                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
-    const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
-            all: GridColumnOrderClasses.Last,
-            md: GridColumnOrderClasses.First,
-        }, className: b('col', { centered: centered }) },
-        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
-        imageProps && (React.createElement(Fragment, null,
-            React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })),
-            (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption') }, activeTabData.caption))))));
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        React.createElement(BlockHeader, { title: title, description: description, className: b('block-title', { centered: centered }), colSizes: centered ? { all: 12 } : { all: 12, sm: 8 } }),
-        React.createElement(Row, null,
-            React.createElement(Col, { sizes: tabsColSizes },
-                React.createElement(ButtonTabs, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
-        activeTabData && (React.createElement(Row, { className: b('row', { reverse: isReverse }) },
-            mediaContent,
-            textContent))));
+        React.createElement(BlockHeader, { title: title, description: description, className: b('block-title') }),
+        React.createElement(Tabs, { className: b('tabs'), items: tabs, activeTab: activeTab, onSelectTab: setActiveTab, size: "l" }),
+        activeTabData && (React.createElement(Row, null,
+            showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
+                    all: GridColumnOrderClasses.Last,
+                    md: GridColumnOrderClasses.First,
+                } },
+                (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
+                imageProps && (React.createElement(Fragment, null,
+                    React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })),
+                    activeTabData && (React.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
+            React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
+                React.createElement("div", { className: b('content-wrapper', {
+                        margin: Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps),
+                    }) },
+                    React.createElement("h4", { className: b('content-title') },
+                        React.createElement(YFMWrapper, { content: activeTabData.title, modifiers: { constructor: true } })),
+                    React.createElement(YFMWrapper, { content: activeTabData.text, modifiers: { constructor: true } }),
+                    React.createElement(Links, { links: [
+                            ...(activeTabData.link ? [activeTabData.link] : []),
+                            ...(activeTabData.links || []),
+                        ], className: b('link') })))))));
 };
 export default TabsBlock;

package/build/esm/components/Image/Image.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, MouseEventHandler } from 'react';
 import { ImageDeviceProps, ImageObjectProps } from '../../models';
-import './Image.css';
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
     style?: CSSProperties;
     className?: string;

package/build/esm/components/Image/Image.js

@@ -1,9 +1,6 @@
 import React, { useContext, useState, Fragment } from 'react';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { BREAKPOINTS } from '../../constants';
-import { block } from '../../utils';
-import './Image.css';
-const b = block('Image');
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
@@ -20,7 +17,7 @@ const Image = (props) => {
         disableCompress ||
         imageSrc.endsWith('.svg') ||
         imgLoadingError;
-    return (React.createElement("picture", { className: b() },
+    return (React.createElement("picture", null,
         mobile && (React.createElement(Fragment, null,
             !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)` })),
             React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)` }))),

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -50,7 +50,7 @@ const VideoBlock = (props) => {
     }, [src, attributes]);
     useEffect(() => {
         const updateSize = _.debounce(() => {
-            setHeight(ref.current ? Math.floor(getHeight(ref.current.offsetWidth)) : undefined);
+            setHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
         window.addEventListener('resize', updateSize);

package/build/esm/constructor-items.d.ts

@@ -11,7 +11,7 @@ export declare const blockMap: {
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "security-block": (props: import("./models").SecurityBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
-    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated }: import("./models").TabsBlockProps) => JSX.Element;
     "link-table-block": ({ items, title, description, linkTheme }: import("./models").LinkTableBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;

package/build/esm/models/constructor-items/blocks.d.ts

@@ -114,14 +114,12 @@ export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
 }
-export interface ExtendedFeaturesItem {
-    title?: string;
-    text?: string;
+export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
+    title: string;
     label?: string;
     icon?: ThemedImage;
     /** @deprecated **/
     link?: LinkProps;
-    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];
@@ -221,21 +219,18 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+export interface TabsBlockItem {
     tabName: string;
-    /**
-     * @deprecated Use array links from ContentBlockProps instead
-     */
+    title: string;
+    text: string;
     link?: LinkProps;
     image?: ThemedImage;
     disableCompress?: boolean;
     caption?: string;
     media?: ThemedMediaProps;
+    links?: LinkProps[];
 }
 export interface TabsBlockProps extends BlockHeaderProps, Animatable {
-    tabsColSizes?: GridColumnSizesType;
-    centered?: boolean;
-    direction?: MediaDirection;
     items: TabsBlockItem[];
 }
 export interface LinkTableBlockProps extends BlockHeaderProps {

package/build/esm/text-transform/blocks.js

@@ -19,6 +19,7 @@ export const createItemsParser = (fields) => (transformer, items) => items.map((
         }, {}));
     }
 });
+const parseItems = createItemsParser(['title', 'text']);
 function parseTableBlock(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)) });
@@ -44,13 +45,9 @@ function parseSlider(transformer, block) {
 }
 const parseTitle = (transformer, title) => typeof title === 'object' && 'text' in title
     ? Object.assign(Object.assign({}, title), { text: transformer(title.text) }) : title && transformer(title);
-const parseItemsTitle = (transformer, items) => items.map((_a) => {
-    var { title } = _a, rest = __rest(_a, ["title"]);
-    return (Object.assign({ title: title && parseTitle(transformer, title) }, rest));
-});
 function parsePriceDetailedBlock(transformer, block) {
     const { priceType } = block;
-    block.items = block.items.map((item) => {
+    const transformedBlockItems = block.items.map((item) => {
         const { description, items: details = [] } = item;
         if (priceType === 'marked-list') {
             item.items = details.map((detail) => {
@@ -67,6 +64,7 @@ function parsePriceDetailedBlock(transformer, block) {
         item.description = transformer(description);
         return item;
     });
+    block.items = transformedBlockItems;
     return block;
 }
 const parseContentLayout = (transformer, content) => {
@@ -222,12 +220,7 @@ const config = {
         {
             fields: ['items'],
             transformer: yfmTransformer,
-            parser: createItemsParser(['text', 'additionalInfo']),
-        },
-        {
-            fields: ['items'],
-            transformer: typografTransformer,
-            parser: parseItemsTitle,
+            parser: parseItems,
         },
     ],
     [BlockType.TableBlock]: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.7.0-alpha.7",
+  "version": "1.7.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -57,7 +57,7 @@
     "typograf": "^6.14.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
+    "react": "^16.0.0 || ^17.0.0",
     "@gravity-ui/uikit": "^3.0.1",
     "@doc-tools/transform": "^2.6.1"
   },
@@ -121,8 +121,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/models/constructor-items/blocks.d.ts

@@ -114,14 +114,12 @@ export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
 }
-export interface ExtendedFeaturesItem {
-    title?: string;
-    text?: string;
+export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
+    title: string;
     label?: string;
     icon?: ThemedImage;
     /** @deprecated **/
     link?: LinkProps;
-    links?: LinkProps[];
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];
@@ -221,21 +219,18 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+export interface TabsBlockItem {
     tabName: string;
-    /**
-     * @deprecated Use array links from ContentBlockProps instead
-     */
+    title: string;
+    text: string;
     link?: LinkProps;
     image?: ThemedImage;
     disableCompress?: boolean;
     caption?: string;
     media?: ThemedMediaProps;
+    links?: LinkProps[];
 }
 export interface TabsBlockProps extends BlockHeaderProps, Animatable {
-    tabsColSizes?: GridColumnSizesType;
-    centered?: boolean;
-    direction?: MediaDirection;
     items: TabsBlockItem[];
 }
 export interface LinkTableBlockProps extends BlockHeaderProps {

package/server/text-transform/blocks.js

@@ -36,6 +36,7 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
     }
 });
 exports.createItemsParser = createItemsParser;
+const parseItems = (0, exports.createItemsParser)(['title', 'text']);
 function parseTableBlock(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)) });
@@ -61,13 +62,9 @@ function parseSlider(transformer, block) {
 }
 const parseTitle = (transformer, title) => typeof title === 'object' && 'text' in title
     ? Object.assign(Object.assign({}, title), { text: transformer(title.text) }) : title && transformer(title);
-const parseItemsTitle = (transformer, items) => items.map((_a) => {
-    var { title } = _a, rest = __rest(_a, ["title"]);
-    return (Object.assign({ title: title && parseTitle(transformer, title) }, rest));
-});
 function parsePriceDetailedBlock(transformer, block) {
     const { priceType } = block;
-    block.items = block.items.map((item) => {
+    const transformedBlockItems = block.items.map((item) => {
         const { description, items: details = [] } = item;
         if (priceType === 'marked-list') {
             item.items = details.map((detail) => {
@@ -84,6 +81,7 @@ function parsePriceDetailedBlock(transformer, block) {
         item.description = transformer(description);
         return item;
     });
+    block.items = transformedBlockItems;
     return block;
 }
 const parseContentLayout = (transformer, content) => {
@@ -241,12 +239,7 @@ const config = {
         {
             fields: ['items'],
             transformer: yfmTransformer,
-            parser: (0, exports.createItemsParser)(['text', 'additionalInfo']),
-        },
-        {
-            fields: ['items'],
-            transformer: typografTransformer,
-            parser: parseItemsTitle,
+            parser: parseItems,
         },
     ],
     [models_1.BlockType.TableBlock]: [

package/build/cjs/components/ButtonTabs/ButtonTabs.css

@@ -1,12 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-button-tabs {
-  margin-bottom: 20px;
-}
-.pc-button-tabs__item {
-  margin-right: 8px;
-  margin-bottom: 12px;
-}
-.pc-button-tabs__item_active {
-  pointer-events: none;
-}

package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,13 +0,0 @@
-import { ButtonProps } from '../../models';
-export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
-    id: string;
-    title: string;
-}
-export interface ButtonTabsProps {
-    className?: string;
-    items: ButtonTabsItemProps[];
-    activeTab?: string;
-    onSelectTab?: (tabId: string) => void;
-}
-declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
-export default ButtonTabs;

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const utils_1 = require("../../utils");
-const index_1 = require("../index");
-const b = (0, utils_1.block)('button-tabs');
-const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
-    // const isMobile = useContext(MobileContext);
-    const activeTabId = (0, react_1.useMemo)(() => {
-        if (activeTab) {
-            return activeTab;
-        }
-        return items[0].id;
-    }, [activeTab, items]);
-    const handleClick = (0, react_1.useCallback)((tabId) => {
-        if (onSelectTab) {
-            onSelectTab(tabId);
-        }
-    }, [onSelectTab]);
-    return (react_1.default.createElement("div", { className: b(null, className) }, items.map((item) => {
-        const isActive = item.id === activeTabId;
-        return (react_1.default.createElement(index_1.Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
-    })));
-};
-exports.default = ButtonTabs;

package/build/cjs/components/Image/Image.css

@@ -1,3 +0,0 @@
-.pc-Image {
-  height: 100%;
-}

package/build/esm/components/ButtonTabs/ButtonTabs.css

@@ -1,12 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-button-tabs {
-  margin-bottom: 20px;
-}
-.pc-button-tabs__item {
-  margin-right: 8px;
-  margin-bottom: 12px;
-}
-.pc-button-tabs__item_active {
-  pointer-events: none;
-}

package/build/esm/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,14 +0,0 @@
-import { ButtonProps } from '../../models';
-import './ButtonTabs.css';
-export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
-    id: string;
-    title: string;
-}
-export interface ButtonTabsProps {
-    className?: string;
-    items: ButtonTabsItemProps[];
-    activeTab?: string;
-    onSelectTab?: (tabId: string) => void;
-}
-declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
-export default ButtonTabs;

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -1,25 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { block } from '../../utils';
-import { Button } from '../index';
-import './ButtonTabs.css';
-const b = block('button-tabs');
-const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
-    // const isMobile = useContext(MobileContext);
-    const activeTabId = useMemo(() => {
-        if (activeTab) {
-            return activeTab;
-        }
-        return items[0].id;
-    }, [activeTab, items]);
-    const handleClick = useCallback((tabId) => {
-        if (onSelectTab) {
-            onSelectTab(tabId);
-        }
-    }, [onSelectTab]);
-    return (React.createElement("div", { className: b(null, className) }, items.map((item) => {
-        const isActive = item.id === activeTabId;
-        return (React.createElement(Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
-    })));
-};
-export default ButtonTabs;

package/build/esm/components/Image/Image.css

@@ -1,3 +0,0 @@
-.pc-Image {
-  height: 100%;
-}