@gravity-ui/blog-constructor 4.4.0 → 5.0.0

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

@@ -35,5 +35,5 @@ export const Header = (props) => {
             [PaddingsDirections.bottom]: paddingBottom,
         } },
         React.createElement(HeaderBlock, Object.assign({}, props, { title: title, description: description, breadcrumbs: breadcrumbs }),
-            React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, dataQa: "blog-header-meta-container" }))));
+            React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, qa: "blog-header-meta-container" }))));
 };

package/build/esm/blocks/Media/Media.css

@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   height: 100%;
   width: 100%;
   border-radius: calc(var(--bc-border-radius) + 1px);
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
   overflow: hidden;
 }
 .bc-media__content {

package/build/esm/blocks/Meta/Meta.js

@@ -33,11 +33,11 @@ export const Meta = (props) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, dataQa: "blog-meta-content" },
+        }, qa: "blog-meta-content" },
         breadcrumbs && (React.createElement(HeaderBreadcrumbs, { items: breadcrumbs.items, className: b('breadcrumbs'), theme: theme, metrikaGoals: breadcrumbs.metrikaGoals })),
         title && (React.createElement(YFMWrapper, { content: title, modifiers: {
                 blogBreadcrumbs: true,
                 resetPaddings: true,
             } })),
-        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, dataQa: "blog-meta-block" }))));
+        post && (React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, qa: "blog-meta-block" }))));
 };

package/build/esm/components/ButtonWithIcon/ButtonWithIcon.css

@@ -40,10 +40,10 @@ unpredictable css rules order in build */
   transition: color 0.2s;
 }
 .bc-button-with-icon_theme_primary:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .bc-button-with-icon_theme_secondary {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   transition: color 0.2s;
 }
 .bc-button-with-icon_theme_secondary:hover {
@@ -54,10 +54,10 @@ unpredictable css rules order in build */
   transition: color 0.2s;
 }
 .bc-button-with-icon_theme_link:hover {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .bc-button-with-icon_theme_accent {
-  color: var(--yc-color-text-yandex-red);
+  color: var(--g-color-base-danger-heavy);
   transition: opacity 0.2s;
   opacity: 0.7;
 }
@@ -66,10 +66,10 @@ unpredictable css rules order in build */
 }
 .bc-button-with-icon_disabled {
   cursor: default;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .bc-button-with-icon_disabled:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .mobile .bc-button-with-icon:hover {
   color: inherit;

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

@@ -17,7 +17,7 @@ unpredictable css rules order in build */
 }
 .bc-feed-header__content_theme_dark.bc-feed-header__content_theme_dark .bc-feed-header__title,
 .bc-feed-header__content_theme_dark.bc-feed-header__content_theme_dark .bc-feed-header__description * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 
 .bc-feed-header_has-background {
@@ -49,6 +49,6 @@ unpredictable css rules order in build */
   }
 }
 .mobile .bc-feed-header_has-background .bc-feed-header__title {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
 }

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

@@ -4,7 +4,7 @@ import { block } from '../../utils/cn';
 import { Controls } from './components/Controls/Controls';
 import './FeedHeader.css';
 const b = block('feed-header');
-export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, queryParams, }) => {
+export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'light', verticalOffset = 'l', className, queryParams, }) => {
     const backgroundThemed = background && getThemedValue(background, theme);
     return (React.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
         (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (React.createElement(FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,

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

@@ -14,22 +14,22 @@ unpredictable css rules order in build */
   flex-wrap: wrap;
 }
 .bc-feed-controls__header-item_title {
-  font-size: var(--yc-text-display-4-font-size);
-  line-height: var(--yc-text-display-4-line-height);
+  font-size: var(--g-text-display-4-font-size);
+  line-height: var(--g-text-display-4-line-height);
   padding-top: 112px;
   padding-bottom: 96px;
 }
 .bc-feed-controls__search {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   border-radius: 10px;
   width: 100%;
   max-width: 100%;
 }
 .bc-feed-controls__search .yc-text-input_view_normal .yc-text-input__control {
-  border-color: var(--yc-color-base-background);
+  border-color: var(--g-color-base-background);
 }
 .bc-feed-controls__select {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   border-radius: 10px;
   width: 100%;
 }
@@ -47,7 +47,7 @@ unpredictable css rules order in build */
   display: none;
 }
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .yc-list {
-  max-height: calc(500px - var(--yc-text-body-3-line-height) - 12px);
+  max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
 }
 .bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
   margin: 4px;
@@ -57,6 +57,8 @@ unpredictable css rules order in build */
   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;
@@ -66,21 +68,23 @@ unpredictable css rules order in build */
 }
 
 .bc-feed-controls__popup-filter .yc-text-input__control {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   border: none;
 }
 .bc-feed-controls__popup-filter .yc-text-input__control:hover, .bc-feed-controls__popup-filter .yc-text-input__control:focus {
   border: none;
 }
 .bc-feed-controls__select:hover {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   width: 100%;
 }
 .bc-feed-controls__saved-only-button {
   border-radius: 10px;
 }
 .bc-feed-controls__saved-only-button_savedOnly {
+  --g-button-background-color: var(--pc-monochrome-button-background-color);
+  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
 }
@@ -91,7 +95,7 @@ unpredictable css rules order in build */
   color: var(--pc-monochrome-button-color);
 }
 .bc-feed-controls__saved-only-button_savedOnly:focus {
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
 }
 .bc-feed-controls__filter-item {
   margin-right: 8px;
@@ -111,8 +115,8 @@ unpredictable css rules order in build */
   flex-grow: 0;
 }
 .bc-feed-controls__icon {
-  color: var(--yc-my-color-brand-normal);
+  color: var(--g-color-base-brand);
 }
 .bc-feed-controls__icon_savedOnly {
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
 }

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

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .bc-feed-custom-select-option {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
 }
 .bc-feed-custom-select-option__icon {

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

@@ -1,25 +1,25 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .bc-feed-custom-switcher__custom-switcher {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: var(--yc-color-base-background);
-  border: 1px solid var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
+  border: 1px solid var(--g-color-base-background);
   border-radius: 10px;
   width: 100%;
   line-height: 42px;
 }
-.bc-feed-custom-switcher__custom-switcher + .yc-popup-wrapper.yc-popup-wrapper_open {
+.bc-feed-custom-switcher__custom-switcher + .yc-popup.yc-popup_open {
   position: absolute !important;
   inset: auto !important;
   transform: translate3d(0, 4px, 0) !important;
 }
 .bc-feed-custom-switcher__custom-switcher:hover {
-  border-color: var(--yc-color-base-generic-hover);
+  border-color: var(--g-color-base-generic-hover);
   cursor: pointer;
 }
 .bc-feed-custom-switcher__custom-switcher-element_content {
@@ -34,11 +34,11 @@ unpredictable css rules order in build */
   align-items: center;
   height: 20px;
   padding: 0 6px;
-  background-color: var(--yc-color-base-selection);
+  background-color: var(--g-color-base-selection);
   border-radius: 4px;
   transition: backgound-color 0.1s linear;
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 .bc-feed-custom-switcher__custom-switcher-element_arrow {
   display: flex;

package/build/esm/components/Paginator/Paginator.css

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
 }
 .bc-paginator__link {
   text-decoration: none;
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .bc-paginator__item {
   display: inline-flex;
@@ -19,9 +19,9 @@ unpredictable css rules order in build */
   min-height: 44px;
   margin-left: 4px;
   padding: 12px 0px;
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .bc-paginator__item_type_page {
   --bc-border-radius: 10px;
@@ -31,10 +31,10 @@ unpredictable css rules order in build */
   border-radius: var(--bc-border-radius);
 }
 .bc-paginator__item_type_page:hover {
-  background: var(--yc-color-base-simple-hover);
+  background: var(--g-color-base-simple-hover);
 }
 .bc-paginator__item_type_page.bc-paginator__item_active {
-  background: var(--yc-color-base-simple-hover);
+  background: var(--g-color-base-simple-hover);
   cursor: default;
 }
 .bc-paginator__pagination {

package/build/esm/components/PostCard/PostCard.css

@@ -32,38 +32,38 @@ unpredictable css rules order in build */
   margin-bottom: 8px;
 }
 .bc-post-card__title_size_s {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  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(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 .bc-post-card__title_size_m {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 @media (max-width: 576px) {
   .bc-post-card__title_size_m {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .bc-post-card__image-container {
   height: 156px;
 }
 .bc-post-card__tag {
-  color: var(--yc-color-text-secondary);
-  font-weight: var(--yc-text-accent-font-weight);
+  color: var(--g-color-text-secondary);
+  font-weight: var(--g-text-accent-font-weight);
 }
 .bc-post-card__tag_size_s {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   padding-bottom: 4px;
 }
 .bc-post-card__tag_size_m {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
   padding-bottom: 8px;
 }
 .bc-post-card__description {
@@ -72,7 +72,7 @@ unpredictable css rules order in build */
   text-overflow: ellipsis;
   max-height: 96px;
   white-space: initial;
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 @supports (-webkit-line-clamp: 5) {
   .bc-post-card__description {

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

@@ -30,5 +30,5 @@ export const PostCard = ({ post, metrikaGoals, fullWidth = false, size = 's', sh
                     blogCard: true,
                 } }))),
         React.createElement(CardBase.Footer, null,
-            React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, dataQa: "blog-suggest-block" }))));
+            React.createElement(SuggestPostInfo, { postId: blogPostId || id, date: date, readingTime: readingTime, hasUserLike: hasUserLike, likes: likesProps, size: size, qa: "blog-suggest-block" }))));
 };

package/build/esm/components/PostInfo/PostInfo.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .bc-post-info__item {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   padding-right: 24px;
   padding-top: 12px;
@@ -10,16 +10,16 @@ unpredictable css rules order in build */
   align-items: center;
 }
 .bc-post-info__item_size_s {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .bc-post-info__item_size_m {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .bc-post-info__item:last-child {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   padding-right: 0px;
   padding-top: 12px;
@@ -27,32 +27,32 @@ unpredictable css rules order in build */
   align-items: center;
 }
 .bc-post-info__switcher {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .bc-post-info__switcher:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .bc-post-info__switcher_theme_dark {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
-.bc-post-info__switcher_theme_dark.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark.yc-share-popover__container {
-  color: var(--yc-color-text-light-secondary);
+.bc-post-info__switcher_theme_dark.gc-share-tooltip__container, .bc-post-info__switcher_theme_dark.gc-share-popover__container {
+  color: var(--g-color-text-light-secondary);
 }
 .bc-post-info__switcher_theme_dark:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
-.bc-post-info__switcher_theme_dark:hover.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark:hover.yc-share-popover__container {
-  color: var(--yc-color-text-light-primary);
+.bc-post-info__switcher_theme_dark:hover.gc-share-tooltip__container, .bc-post-info__switcher_theme_dark:hover.gc-share-popover__container {
+  color: var(--g-color-text-light-primary);
 }
 .bc-post-info__container {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   padding-top: 12px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .bc-post-info__container_theme_dark {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .bc-post-info__icon {
   margin-right: 6px;
@@ -73,10 +73,10 @@ unpredictable css rules order in build */
   cursor: pointer;
 }
 .bc-post-info__content_cursor:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .bc-post-info__content_cursor.bc-post-info__content_theme_dark:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .bc-post-info__likes {
   display: flex;

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { PostData } from '../../models/common';
+import { PostData, QAProps } from '../../models/common';
 import './PostInfo.css';
 export type BlogMetrikaGoals = {
     sharing?: string;
     save?: string;
 };
-type PostInfoProps = {
+type PostInfoProps = QAProps & {
     postId: PostData['id'];
     readingTime: PostData['readingTime'];
     date: PostData['date'];
@@ -14,7 +14,6 @@ type PostInfoProps = {
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
     metrikaGoals?: BlogMetrikaGoals;
-    dataQa?: string;
 };
 /**
  *  Blog post info panel component
@@ -24,7 +23,7 @@ type PostInfoProps = {
  * @param date - post create date
  * @param theme - theme name
  * @param metrikaGoals - metrika goals name
- * @param dataQa - test-attr
+ * @param qa - test-attr
  *
  * @returns jsx
  */

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

@@ -15,15 +15,15 @@ const b = block('post-info');
  * @param date - post create date
  * @param theme - theme name
  * @param metrikaGoals - metrika goals name
- * @param dataQa - test-attr
+ * @param qa - test-attr
  *
  * @returns jsx
  */
-export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, dataQa, }) => {
+export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, qa, }) => {
     const { likes } = useContext(PostPageContext);
     return (React.createElement("div", { className: b('container', { theme }) },
         date && React.createElement(Date, { date: date }),
         readingTime && React.createElement(ReadingTime, { readingTime: readingTime }),
         React.createElement(Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
-        likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, dataQa: dataQa }))));
+        likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, qa: qa }))));
 };

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

@@ -1,10 +1,9 @@
 import React from 'react';
-import { PostData, ToggleLikeCallbackType } from '../../models/common';
+import { PostData, QAProps, ToggleLikeCallbackType } from '../../models/common';
 import './PostInfo.css';
-export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'> {
+export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'>, QAProps {
     postId: PostData['blogPostId'];
     size?: 's' | 'm';
-    dataQa?: string;
     likes?: {
         likesCount?: number;
         hasUserLike?: boolean;
@@ -19,7 +18,7 @@ export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTi
  * @param readingTime - post reading time
  * @param hasUserLike - flag that the user liked the post
  * @param likes - likes count
- * @param dataQa - test-attr
+ * @param qa - test-attr
  * @param size - text size
  * @param isModernIcon - flag what we need render 'bookmark' icon
  *

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

@@ -14,13 +14,13 @@ const b = block('post-info');
  * @param readingTime - post reading time
  * @param hasUserLike - flag that the user liked the post
  * @param likes - likes count
- * @param dataQa - test-attr
+ * @param qa - test-attr
  * @param size - text size
  * @param isModernIcon - flag what we need render 'bookmark' icon
  *
  * @returns jsx
  */
-export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', dataQa, }) => {
+export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', 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,
@@ -31,5 +31,5 @@ export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's',
         React.createElement("div", { className: b('suggest-container') },
             date && React.createElement(Date, { date: date, size: size }),
             readingTime && React.createElement(ReadingTime, { readingTime: readingTime, size: size })),
-        likes && postId && (React.createElement(Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, dataQa: dataQa }))));
+        likes && postId && (React.createElement(Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, qa: qa }))));
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { QAProps } from '../../../models/common';
 import '../PostInfo.css';
-type SaveProps = {
+type SaveProps = QAProps & {
     title: string | number;
     postId: number;
     hasUserLike: boolean;
@@ -10,7 +11,6 @@ type SaveProps = {
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
     metrikaGoal?: string;
-    dataQa?: string;
     size?: 's' | 'm';
 };
 /**
@@ -20,7 +20,7 @@ type SaveProps = {
  * @param postId - post id
  * @param hasUserLike - flag what blog has like from current user
  * @param metrikaGoal - metrika goal name
- * @param dataQa - test-attr
+ * @param qa - test-attr
  * @param size - text size
  *
  * @returns jsx

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

@@ -19,12 +19,12 @@ const b = block('post-info');
  * @param postId - post id
  * @param hasUserLike - flag what blog has like from current user
  * @param metrikaGoal - metrika goal name
- * @param dataQa - test-attr
+ * @param qa - test-attr
  * @param size - text size
  *
  * @returns jsx
  */
-export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
+export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, qa, }) => {
     const { toggleLike, isSignedInUser, requireSignIn } = useContext(LikesContext);
     const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
     const isLikeable = Boolean(toggleLike);
@@ -45,7 +45,7 @@ export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal,
             handleUserLike();
             metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
             handleAnalytics();
-        }, "data-qa": `${dataQa ? dataQa + '-' : ''}save` },
+        }, "data-qa": `${qa ? qa + '-' : ''}save` },
         React.createElement("div", { className: b('content', { cursor: isLikeable, theme }) },
             React.createElement("span", { className: b('icon') },
                 React.createElement(Icon, { data: hasUserLike ? SaveFilled : SaveIcon, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
+import { ShareLayoutDirection, SharePopover } from '@gravity-ui/components';
 import { useAnalytics } from '@gravity-ui/page-constructor';
-import { SharePopover } from '@gravity-ui/uikit';
 import { MobileContext } from '../../../contexts/MobileContext';
 import { PostPageContext } from '../../../contexts/PostPageContext';
 import { RouterContext } from '../../../contexts/RouterContext';
@@ -27,5 +27,5 @@ export const Sharing = ({ theme, metrikaGoal }) => {
     }, [handleAnalyticsGlobal, handleMetrika]);
     return (React.createElement("div", { className: b('item') },
         React.createElement("div", { className: b('icon') },
-            React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleAnalytics }))));
+            React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: ShareLayoutDirection.Column, buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, onClick: handleAnalytics }))));
 };

package/build/esm/components/Posts/Posts.css

@@ -26,7 +26,7 @@ unpredictable css rules order in build */
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--yc-color-promo-base-tomato);
+  color: var(--g-color-base-danger-medium);
   padding-bottom: 12px;
 }
 .bc-posts__paginator {

package/build/esm/components/PostsEmpty/PostsEmpty.css

@@ -14,12 +14,12 @@ unpredictable css rules order in build */
 }
 .bc-posts-empty__title {
   margin-top: 24px;
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
+  font-weight: var(--g-text-accent-font-weight);
 }
 .bc-posts-empty__subtitle {
   margin-top: 16px;
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }