@gravity-ui/blog-constructor 5.0.2 → 5.2.0

package/build/cjs/constructor/blocksMap.d.ts

@@ -1,18 +1,18 @@
 declare const _default: {
     blocks: {
-        "blog-yfm-block": import("react").FC<import("../models/blocks").YFMProps>;
-        "blog-layout-block": import("react").FC<import("../models/blocks").LayoutProps>;
-        "blog-media-block": import("react").FC<import("../models/blocks").MediaProps>;
-        "blog-banner-block": import("react").FC<import("../models/blocks").BannerProps>;
-        "blog-cta-block": import("react").FC<import("../models/blocks").CTAProps>;
-        "blog-colored-text-block": import("react").FC<import("../models/blocks").ColoredTextProps>;
-        "blog-author-block": import("react").FC<import("../models/blocks").AuthorProps>;
-        "blog-suggest-block": import("react").FC<import("../models/blocks").SuggestProps>;
-        "blog-meta-block": import("react").FC<import("../models/blocks").MetaProps>;
-        "blog-feed-block": import("react").FC<import("../models/blocks").FeedProps>;
+        "blog-yfm-block": (props: import("../models/blocks").YFMProps) => import("react").JSX.Element;
+        "blog-layout-block": ({ fullWidth, mobileOrder, children, paddingTop, paddingBottom, }: import("react").PropsWithChildren<import("../models/blocks").LayoutProps>) => import("react").JSX.Element;
+        "blog-media-block": ({ text, paddingTop, paddingBottom, ...mediaProps }: import("../models/blocks").MediaProps) => import("react").JSX.Element;
+        "blog-banner-block": ({ color, imageSize, image, paddingTop, paddingBottom, qa, ...content }: import("../models/blocks").BannerProps) => import("react").JSX.Element;
+        "blog-cta-block": ({ items, paddingTop, paddingBottom }: import("../models/blocks").CTAProps) => import("react").JSX.Element;
+        "blog-colored-text-block": ({ background, paddingTop, paddingBottom, qa, ...content }: import("../models/blocks").ColoredTextProps) => import("react").JSX.Element;
+        "blog-author-block": (props: import("../models/blocks").AuthorProps) => import("react").JSX.Element | null;
+        "blog-suggest-block": ({ paddingTop, paddingBottom }: import("../models/blocks").SuggestProps) => import("react").JSX.Element | null;
+        "blog-meta-block": (props: import("../models/blocks").MetaProps) => import("react").JSX.Element;
+        "blog-feed-block": ({ image }: import("../models/blocks").FeedProps) => import("react").JSX.Element;
     };
     headers: {
-        "blog-header-block": import("react").FC<import("../models/blocks").HeaderProps>;
+        "blog-header-block": (props: import("../models/blocks").HeaderProps) => import("react").JSX.Element;
     };
 };
 export default _default;

package/build/cjs/containers/BlogPostPage/BlogPostPage.d.ts

@@ -18,4 +18,4 @@ export interface BlogPostPageProps {
     isSignedInUser?: boolean;
     onClickSignIn?: React.EventHandler<SyntheticEvent>;
 }
-export declare const BlogPostPage: React.FC<BlogPostPageProps>;
+export declare const BlogPostPage: ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, isSignedInUser, onClickSignIn, }: BlogPostPageProps) => React.JSX.Element;

package/build/cjs/icons/Close.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Close: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const Close: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/icons/DropdownArrow.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const DropdownArrow: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const DropdownArrow: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/icons/Save.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Save: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const Save: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/icons/SaveFilled.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const SaveFilled: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const SaveFilled: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/icons/SearchIcon.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const SearchIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/icons/ShareArrowUp.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const ShareArrowUp: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const ShareArrowUp: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/build/cjs/icons/Time.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Time: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const Time: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

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

@@ -1,17 +1,17 @@
 import { ReactElement } from 'react';
 import { ContentBlockProps, HeaderBlockProps, MediaProps as PCMediaProps, TextTheme } from '@gravity-ui/page-constructor';
-import { BlockType, ClassNameProps, PostData } from './common';
+import { BlockType, ClassNameProps, PostData, QAProps } from './common';
 import { PaddingsYFMProps } from './paddings';
 export type AuthorProps = ClassNameProps & {
     authorId: number;
     image: string;
-} & PaddingsYFMProps;
-export type BannerProps = ContentBlockProps & {
+} & PaddingsYFMProps & QAProps;
+export type BannerProps = ContentBlockProps & QAProps & {
     color?: string;
     image?: string;
     imageSize?: 's' | 'm';
 } & PaddingsYFMProps;
-export type ColoredTextProps = ContentBlockProps & {
+export type ColoredTextProps = ContentBlockProps & QAProps & {
     background?: {
         color?: string;
         image?: string;
@@ -40,7 +40,7 @@ export type SuggestProps = ClassNameProps & {
 } & PaddingsYFMProps;
 export type YFMProps = {
     text: string;
-} & PaddingsYFMProps;
+} & PaddingsYFMProps & QAProps;
 export type FeedProps = {
     image: string;
 };

package/build/cjs/models/common.d.ts

@@ -168,3 +168,11 @@ export type FetchArgs = {
 export interface QAProps {
     qa?: string;
 }
+export declare enum PostCardSize {
+    SMALL = "s",
+    MEDIUM = "m"
+}
+export declare enum PostCardTitleHeadingLevel {
+    H2 = "h2",
+    H3 = "h3"
+}

package/build/cjs/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEventNames = exports.BlockType = exports.Theme = void 0;
+exports.PostCardTitleHeadingLevel = exports.PostCardSize = exports.DefaultEventNames = exports.BlockType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -31,4 +31,14 @@ var DefaultEventNames;
     DefaultEventNames["Tag"] = "selector-tag-click";
     DefaultEventNames["Service"] = "selector-service-click";
     DefaultEventNames["SaveOnly"] = "save-only-button-click";
-})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));
+})(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));
+var PostCardSize;
+(function (PostCardSize) {
+    PostCardSize["SMALL"] = "s";
+    PostCardSize["MEDIUM"] = "m";
+})(PostCardSize = exports.PostCardSize || (exports.PostCardSize = {}));
+var PostCardTitleHeadingLevel;
+(function (PostCardTitleHeadingLevel) {
+    PostCardTitleHeadingLevel["H2"] = "h2";
+    PostCardTitleHeadingLevel["H3"] = "h3";
+})(PostCardTitleHeadingLevel = exports.PostCardTitleHeadingLevel || (exports.PostCardTitleHeadingLevel = {}));

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

@@ -1,4 +1,3 @@
-import blockOrigin from 'bem-cn-lite';
 export declare const NAMESPACE = "bc-";
-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;

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 = 'bc-';
-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/cjs/utils/common.d.ts

@@ -41,4 +41,5 @@ export declare const isMetrikaExist: (goal: NewMetrikaGoal, existGoals: NewMetri
 export declare const getBlogElementMetrika: (blogCustomGoal: NewMetrikaGoal, existingGoals?: MetrikaGoal) => string | string[] | NewMetrikaGoal[];
 export declare const getFeedQueryParams: (queryString: Query, pageNumber?: number) => GetPostsRequest;
 export declare const scrollOnPageChange: (containerId: string) => void;
+export declare const getQaAttributes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;
 export {};

package/build/cjs/utils/common.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getBlogElementMetrika = exports.isMetrikaExist = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.getTagFilterUrl = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
+exports.getQaAttributes = exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getBlogElementMetrika = exports.isMetrikaExist = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.getTagFilterUrl = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
 const tslib_1 = require("tslib");
 const url_1 = require("url");
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const lodash_1 = require("lodash");
 const constants_1 = require("../blocks/constants");
 const i18n_1 = require("../i18n");
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
 function getAbsolutePath(router, url) {
     if (!router || !router.pathname) {
         return url !== null && url !== void 0 ? url : '';
@@ -112,4 +113,16 @@ const scrollOnPageChange = (containerId) => {
         (0, exports.scrollToHash)(containerId);
     }
 };
-exports.scrollOnPageChange = scrollOnPageChange;
+exports.scrollOnPageChange = scrollOnPageChange;
+const getQaAttributes = (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.getQaAttributes = getQaAttributes;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { AuthorProps } from '../../models/blocks';
 import './Author.css';
-export declare const Author: React.FC<AuthorProps>;
+export declare const Author: (props: AuthorProps) => React.JSX.Element | null;

package/build/esm/blocks/Author/Author.js

@@ -8,7 +8,7 @@ import './Author.css';
 const b = block('author');
 export const Author = (props) => {
     var _a;
-    const { image, paddingTop, paddingBottom, authorId } = props;
+    const { image, paddingTop, paddingBottom, authorId, qa } = props;
     const { post } = useContext(PostPageContext);
     const author = (_a = post === null || post === void 0 ? void 0 : post.authors) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === authorId);
     const authorItem = useMemo(() => {
@@ -28,7 +28,7 @@ export const Author = (props) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content') },
+        }, className: b('content'), qa: qa },
         React.createElement("div", { className: b('layout'), "data-qa": "blog-author-layout" },
             React.createElement(PCAuthor, { type: AuthorType.Column, author: authorItem, authorContainerClassName: b('container') }))));
 };

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { BannerProps } from '../../models/blocks';
 import './Banner.css';
-export declare const Banner: React.FC<BannerProps>;
+export declare const Banner: ({ color, imageSize, image, paddingTop, paddingBottom, qa, ...content }: BannerProps) => React.JSX.Element;

package/build/esm/blocks/Banner/Banner.js

@@ -5,13 +5,15 @@ import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { BlogMetrikaGoalIds } from '../../constants';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
+import { getBlogElementMetrika, getQaAttributes, updateContentSizes } from '../../utils/common';
 import './Banner.css';
 const b = block('banner');
+const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
 export const Banner = (_a) => {
     var _b;
-    var { color, imageSize = 's', image, paddingTop, paddingBottom } = _a, content = __rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom"]);
+    var { color, imageSize = 's', image, paddingTop, paddingBottom, qa } = _a, content = __rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom", "qa"]);
     const contentStyle = {};
+    const qaAttributes = getQaAttributes(qa, BANNER_CUSTOM_QA_ATTRIBUTES);
     if (color) {
         contentStyle.backgroundColor = color;
     }
@@ -30,10 +32,10 @@ export const Banner = (_a) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('container') },
-        React.createElement("div", { className: b('content'), style: contentStyle, "data-qa": "blog-banner-content" },
+        }, qa: qaAttributes.wrapper, className: b('container') },
+        React.createElement("div", { className: b('content'), style: contentStyle, "data-qa": qaAttributes.content },
             React.createElement("div", { className: b('info') },
-                React.createElement(Content, Object.assign({}, contentData))),
-            image && (React.createElement("div", { className: b('image-container', { ['image-size']: imageSize }) },
+                React.createElement(Content, Object.assign({}, contentData, { qa: qaAttributes.content }))),
+            image && (React.createElement("div", { className: b('image-container', { ['image-size']: imageSize }), "data-qa": qaAttributes.imageContainer },
                 React.createElement(Image, { className: b('image'), src: image }))))));
 };

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CTAProps } from '../../models/blocks';
 import './CTA.css';
-export declare const CTA: React.FC<CTAProps>;
+export declare const CTA: ({ items, paddingTop, paddingBottom }: CTAProps) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ColoredTextProps } from '../../models/blocks';
 import './ColoredText.css';
-export declare const ColoredText: React.FC<ColoredTextProps>;
+export declare const ColoredText: ({ background, paddingTop, paddingBottom, qa, ...content }: ColoredTextProps) => React.JSX.Element;

package/build/esm/blocks/ColoredText/ColoredText.js

@@ -4,18 +4,19 @@ import { BackgroundImage, Content } from '@gravity-ui/page-constructor';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { PaddingsDirections } from '../../models/paddings';
 import { block } from '../../utils/cn';
-import { updateContentSizes } from '../../utils/common';
+import { getQaAttributes, updateContentSizes } from '../../utils/common';
 import './ColoredText.css';
 const b = block('colored-text');
 export const ColoredText = (_a) => {
-    var { background, paddingTop, paddingBottom } = _a, content = __rest(_a, ["background", "paddingTop", "paddingBottom"]);
+    var { background, paddingTop, paddingBottom, qa } = _a, content = __rest(_a, ["background", "paddingTop", "paddingBottom", "qa"]);
     const contentData = updateContentSizes(content);
+    const qaAttributes = getQaAttributes(qa);
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        } },
-        React.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": "blog-colored-text-content" },
+        }, qa: qaAttributes.wrapper },
+        React.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": qaAttributes.container },
             React.createElement("div", { className: b('picture-container') }, (background === null || background === void 0 ? void 0 : background.image) && (React.createElement(BackgroundImage, { className: b('picture'), alt: background === null || background === void 0 ? void 0 : background.altText, src: background === null || background === void 0 ? void 0 : background.image }))),
             React.createElement("div", { className: b('text-content') },
-                React.createElement(Content, Object.assign({}, contentData))))));
+                React.createElement(Content, Object.assign({}, contentData, { qa: qaAttributes.content }))))));
 };

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FeedProps } from '../../models/blocks';
-export declare const Feed: React.FC<FeedProps>;
+export declare const Feed: ({ image }: FeedProps) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { HeaderProps } from '../../models/blocks';
-export declare const Header: React.FC<HeaderProps>;
+export declare const Header: (props: HeaderProps) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { LayoutProps } from '../../models/blocks';
 import './Layout.css';
-export declare const Layout: React.FC<LayoutProps>;
+export declare const Layout: ({ fullWidth, mobileOrder, children, paddingTop, paddingBottom, }: PropsWithChildren<LayoutProps>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MediaProps } from '../../models/blocks';
 import './Media.css';
-export declare const Media: React.FC<MediaProps>;
+export declare const Media: ({ text, paddingTop, paddingBottom, ...mediaProps }: MediaProps) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MetaProps } from '../../models/blocks';
 import './Meta.css';
-export declare const Meta: React.FC<MetaProps>;
+export declare const Meta: (props: MetaProps) => React.JSX.Element;

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

@@ -9,4 +9,4 @@ import { SuggestProps } from '../../models/blocks';
  *
  * @returns -jsx
  */
-export declare const Suggest: React.FC<SuggestProps>;
+export declare const Suggest: ({ paddingTop, paddingBottom }: SuggestProps) => React.JSX.Element | null;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { YFMProps } from '../../models/blocks';
-export declare const YFM: React.FC<YFMProps>;
+export declare const YFM: (props: YFMProps) => React.JSX.Element;

package/build/esm/blocks/YFM/YFM.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { YFMWrapper } from '@gravity-ui/page-constructor';
-import block from 'bem-cn-lite';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { PaddingsDirections } from '../../models/paddings';
-const b = block('yfm');
+import { cn } from '../../utils/cn';
+import { getQaAttributes } from '../../utils/common';
+const b = cn('yfm');
 export const YFM = (props) => {
-    const { text, paddingTop, paddingBottom } = props;
+    const { text, paddingTop, paddingBottom, qa } = props;
+    const qaAttributes = getQaAttributes(qa);
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        } },
+        }, qa: qaAttributes.wrapper },
         React.createElement(YFMWrapper, { content: text, modifiers: {
                 blog: true,
                 resetPaddings: true,

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

@@ -5,5 +5,5 @@ import './FeedHeader.css';
 type HeaderProps = Pick<HeaderBlockProps, 'background' | 'offset' | 'theme' | 'verticalOffset'>;
 type FeedHeaderProps = HeaderProps & ControlsProps;
 type FeedHeaderContainerProps = FeedHeaderProps & ClassNameProps;
-export declare const FeedHeader: React.FC<FeedHeaderContainerProps>;
+export declare const FeedHeader: ({ tags, services, handleLoadData, offset, background, theme, verticalOffset, className, queryParams, }: FeedHeaderContainerProps) => React.JSX.Element;
 export {};

package/build/esm/components/FeedHeader/components/Controls/Controls.css

@@ -23,9 +23,6 @@ unpredictable css rules order in build */
   width: 100%;
   max-width: 100%;
 }
-.bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
-  border-color: var(--g-color-base-background);
-}
 .bc-feed-controls__select {
   width: 100%;
 }
@@ -33,9 +30,6 @@ unpredictable css rules order in build */
   max-height: 500px;
   border-radius: 12px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list {
-  margin-top: 0;
-}
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list {
   overflow: scroll;
 }
@@ -49,27 +43,15 @@ unpredictable css rules order in build */
   margin: 4px;
   border-radius: 8px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-text-input__content {
-  padding: 4px;
-  border: none;
-  border-bottom: 1px solid var(--yc-color-line-generic);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.bc-feed-controls__popup.bc-feed-controls__popup .yc-text-input__content .yc-text-input__control.yc-text-input__control_type_input {
-  border: none;
-}
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list_size_xl .g-select-list__option {
-  padding: 0 16px;
-}
 
-.bc-feed-controls__popup-filter .yc-text-input__control {
+.bc-feed-controls__popup-filter {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  padding: 4px 12px;
   border: none;
-}
-.bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
-  border: none;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .bc-feed-controls__select:hover {
   width: 100%;

package/build/esm/components/FeedHeader/components/Controls/Controls.d.ts

@@ -13,4 +13,4 @@ export type ControlsProps = {
     queryParams: Query;
     setQuery?: SetQueryType;
 };
-export declare const Controls: React.FC<ControlsProps>;
+export declare const Controls: ({ handleLoadData, tags, services, queryParams, }: ControlsProps) => React.JSX.Element;

package/build/esm/components/FeedHeader/components/Controls/Controls.js

@@ -101,7 +101,7 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
                         defaultLabel: i18(Keyset.AllTags),
                     }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: renderOption })),
             services.length > 0 ? (React.createElement("div", { className: b('filter-item') },
-                React.createElement(Select, { className: b('select'), size: "xl", multiple: true, filterable: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: i18(Keyset.AllServices), renderControl: renderSwitcher({
+                React.createElement(Select, { className: b('select'), size: "xl", multiple: true, filterable: true, hasClear: true, disablePortal: true, options: services, defaultValue: servicesItems, popupClassName: b('popup'), onUpdate: handleServicesSelect, placeholder: i18(Keyset.AllServices), renderControl: renderSwitcher({
                         initial: servicesItems,
                         list: services,
                         defaultLabel: i18(Keyset.AllServices),

package/build/esm/components/FeedHeader/components/Controls/customRenders.js

@@ -9,6 +9,5 @@ const b = block('feed-controls');
 export const renderSwitcher = ({ initial, list, defaultLabel }) => 
 // eslint-disable-next-line react/display-name
 ({ onClick, ref }) => (React.createElement(CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
-export const renderFilter = ({ value, ref, onChange, onKeyDown }) => (React.createElement("div", { className: b('popup-filter') },
-    React.createElement(TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, placeholder: i18(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown })));
+export const renderFilter = ({ value, ref, onChange, onKeyDown }) => (React.createElement(TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, view: "clear", placeholder: i18(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
 export const renderOption = (option) => (React.createElement(CustomSelectOption, { data: option }));

package/build/esm/components/Paginator/types.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { Modifications } from 'bem-cn-lite';
-import { ClassNameProps } from '../../models/common';
+import type { ReactNode } from 'react';
+import type { NoStrictEntityMods } from '@bem-react/classname';
+import type { ClassNameProps } from '../../models/common';
 export interface PaginatorItemProps {
     key: string | ArrowType;
     dataKey: string | ArrowType;
-    mods: Modifications;
+    mods: NoStrictEntityMods;
     content: ReactNode;
     onClick?: (key: number | ArrowType) => void;
     loading?: boolean;

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import { MetrikaGoal } from '@gravity-ui/page-constructor';
-import { PostData } from '../../models/common';
+import { PostCardSize, PostCardTitleHeadingLevel, PostData } from '../../models/common';
 import './PostCard.css';
 type PostCardProps = {
     post: PostData;
     fullWidth?: boolean;
     showTag?: boolean;
-    size?: 's' | 'm';
+    size?: PostCardSize;
+    titleHeadingLevel?: PostCardTitleHeadingLevel;
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
     metrikaGoals?: MetrikaGoal;
 };
-export declare const PostCard: React.FC<PostCardProps>;
+export declare const PostCard: ({ post, metrikaGoals, fullWidth, size, showTag, titleHeadingLevel, }: PostCardProps) => React.JSX.Element;
 export {};

package/build/esm/components/PostCard/PostCard.js

@@ -1,11 +1,12 @@
 import React, { useContext, useMemo } from 'react';
 import { CardBase, HTML, YFMWrapper } from '@gravity-ui/page-constructor';
 import { LikesContext } from '../../contexts/LikesContext';
+import { PostCardSize, PostCardTitleHeadingLevel } from '../../models/common';
 import { block } from '../../utils/cn';
 import { SuggestPostInfo } from '../PostInfo/SuggestPostInfo';
 import './PostCard.css';
 const b = block('post-card');
-export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', showTag = false, }) => {
+export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = PostCardSize.SMALL, showTag = false, titleHeadingLevel = PostCardTitleHeadingLevel.H3, }) => {
     var _a;
     const { title: postTitle, htmlTitle, textTitle, blogPostId, id, date, readingTime, hasUserLike, likes, image, description, tags, url, } = post;
     const title = postTitle || textTitle || htmlTitle;
@@ -22,9 +23,9 @@ export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', sh
             React.createElement("div", { className: b('image-container'), "data-qa": "blog-suggest-header" })),
         React.createElement(CardBase.Content, null,
             showTag && ((_a = tags === null || tags === void 0 ? void 0 : tags[0]) === null || _a === void 0 ? void 0 : _a.name) && (React.createElement("div", { className: b('tag', { size }) }, tags[0].name)),
-            title && (React.createElement("h4", { className: b('title', { size }) },
-                React.createElement("span", null,
-                    React.createElement(HTML, null, title)))),
+            title &&
+                React.createElement(titleHeadingLevel, { className: b('title', { size }) }, React.createElement("span", null,
+                    React.createElement(HTML, null, title))),
             description && (React.createElement(YFMWrapper, { className: b('description'), content: description, modifiers: {
                     blog: size === 'm',
                     blogCard: true,

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

@@ -27,5 +27,5 @@ type PostInfoProps = QAProps & {
  *
  * @returns jsx
  */
-export declare const PostInfo: React.FC<PostInfoProps>;
+export declare const PostInfo: ({ date, readingTime, postId, theme, metrikaGoals, qa, }: PostInfoProps) => React.JSX.Element;
 export {};

package/build/esm/components/PostInfo/SuggestPostInfo.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
+import { PostCardSize, PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
 import './PostInfo.css';
 export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'>, QAProps {
     postId: PostData['blogPostId'];
-    size?: 's' | 'm';
+    size?: PostCardSize;
     likes?: {
         likesCount?: number;
         hasUserLike?: boolean;
@@ -24,4 +24,4 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
  *
  * @returns jsx
  */
-export declare const SuggestPostInfo: React.FC<SuggestPostInfoProps>;
+export declare const SuggestPostInfo: ({ postId, date, readingTime, likes, size, qa, }: SuggestPostInfoProps) => React.JSX.Element;

package/build/esm/components/PostInfo/SuggestPostInfo.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useLikes } from '../../hooks/useLikes';
+import { PostCardSize } from '../../models/common';
 import { block } from '../../utils/cn';
 import { Date } from './components/Date';
 import { ReadingTime } from './components/ReadingTime';
@@ -20,7 +21,7 @@ const b = block('post-info');
  *
  * @returns jsx
  */
-export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', qa, }) => {
+export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = PostCardSize.SMALL, qa, }) => {
     const { hasUserLike, likesCount, handleLike } = useLikes({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,

package/build/esm/components/PostInfo/components/Date.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { PostCardSize } from '../../../models/common';
 import '../PostInfo.css';
 type DateProps = {
     date: string | number;
-    size?: 's' | 'm';
+    size?: PostCardSize;
 };
-export declare const Date: React.FC<DateProps>;
+export declare const Date: ({ date, size }: DateProps) => React.JSX.Element;
 export {};