@gravity-ui/page-constructor 3.16.0 → 4.0.0

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

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { AnimateBlock, HTML, Title } from '../../components/';
 import Image from '../../components/Image/Image';
 import { getMediaImage } from '../../components/Media/Image/utils';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { Col, Row } from '../../grid';
 import { Content } from '../../sub-blocks';
 import { block, getThemedValue } from '../../utils';
@@ -14,7 +14,7 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         React.createElement(Title, { title: title, subtitle: description, className: b('header') }),
         React.createElement("div", { className: b('items') },

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

@@ -23,7 +23,7 @@ unpredictable css rules order in build */
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-header-block__content_vertical-offset {
   margin: 16px 0;
@@ -48,21 +48,21 @@ unpredictable css rules order in build */
   z-index: 10;
 }
 .pc-header-block__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);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   position: relative;
 }
 @media (max-width: 577px) {
   .pc-header-block__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);
   }
 }
 .pc-header-block__title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -70,21 +70,21 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-header-block__title a:hover, .pc-header-block__title a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-header-block__description {
   margin-top: 16px;
   font-weight: normal;
-  font-size: var(--yc-text-caption-2-font-size);
-  line-height: var(--yc-text-caption-2-line-height);
-  margin-block-end: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-caption-2-font-size);
+  line-height: var(--g-text-caption-2-line-height);
+  margin-block-end: var(--g-text-body-1-line-height);
 }
 .pc-header-block__description .yfm,
 .pc-header-block__description .yfm * {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-primary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-primary);
 }
 .pc-header-block__buttons {
   margin-top: 16px;
@@ -165,18 +165,18 @@ unpredictable css rules order in build */
   transform: none;
   max-width: none;
   width: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-header-block__overtitle {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  margin-block-start: 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);
+  margin-block-start: var(--g-text-body-3-line-height);
   margin-bottom: 8px;
   font-weight: 400;
 }
 .pc-header-block__overtitle a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -184,8 +184,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-header-block__overtitle a:hover, .pc-header-block__overtitle a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {

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

@@ -4,7 +4,7 @@ import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcru
 import { getMediaImage } from '../../components/Media/Image/utils';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { MobileContext } from '../../context/mobileContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { Col, Grid, Row } from '../../grid';
 import { block, getThemedValue } from '../../utils';
 import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
@@ -20,7 +20,7 @@ const FullWidthBackground = ({ background }) => (React.createElement("div", { cl
 export const HeaderBlock = (props) => {
     const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
     const isMobile = useContext(MobileContext);
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const hasRightSideImage = Boolean(image || video);
     const curImageSize = imageSize || getImageSize(width);
     const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);

package/build/esm/blocks/Icons/Icons.css

@@ -4,8 +4,8 @@ unpredictable css rules order in build */
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  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);
 }
 .pc-icons-block_size_s .pc-icons-block__item {
   width: 96px;

package/build/esm/blocks/Info/Info.css

@@ -1,7 +1,7 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-info-block__container {
-  background-color: var(--yc-color-base-special);
+  background-color: var(--g-color-base-brand);
   padding: 96px 64px;
   border-radius: var(--pc-border-radius);
 }

package/build/esm/blocks/Info/Info.js

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import React from 'react';
+import { useTheme } from '../../context/theme';
 import { Col, Grid, Row } from '../../grid';
 import Content from '../../sub-blocks/Content/Content';
 import { block, getThemedValue } from '../../utils';
@@ -8,7 +8,7 @@ const b = block('info-block');
 const sizes = { md: 6, all: 12 };
 export const InfoBlock = (props) => {
     const { backgroundColor, theme: blockTheme = 'dark', buttons = [], title, sectionsTitle, links = [], rightContent = {}, leftContent = {}, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
     const rightLinks = [
         ...((rightContent === null || rightContent === void 0 ? void 0 : rightContent.links) || []),

package/build/esm/blocks/Media/Media.js

@@ -1,12 +1,12 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import Media from '../../components/Media/Media';
 import MediaBase from '../../components/MediaBase/MediaBase';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { getThemedValue } from '../../utils';
 export const MediaBlock = (props) => {
     const { media } = props;
     const [play, setPlay] = useState(false);
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
     return (React.createElement(MediaBase, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         React.createElement(MediaBase.Card, null,

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.css

@@ -5,10 +5,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-PromoFeaturesBlock__card-title {
-  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);
 }
 .pc-PromoFeaturesBlock__card-container {
   display: flex;
@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   background-color: inherit;
 }
 .pc-PromoFeaturesBlock__background_grey {
-  background-color: var(--yc-color-base-misc);
+  background-color: var(--g-color-base-misc-light);
 }
 .pc-PromoFeaturesBlock_grey {
   padding: 64px 0;
@@ -44,8 +44,8 @@ unpredictable css rules order in build */
   margin-bottom: 8px;
 }
 .pc-PromoFeaturesBlock__card-text {
-  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);
 }
 .pc-PromoFeaturesBlock__card-media {
   margin-top: 16px;
@@ -57,24 +57,24 @@ unpredictable css rules order in build */
   padding: 32px;
 }
 .pc-PromoFeaturesBlock__card_light {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-PromoFeaturesBlock__card_default {
-  background-color: var(--yc-color-base-misc);
+  background-color: var(--g-color-base-misc-light);
 }
 .pc-PromoFeaturesBlock__card_accent {
-  color: var(--yc-color-text-light-primary);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-text-light-primary);
+  background-color: var(--g-color-base-brand);
 }
 .pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-title,
 .pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-text > .yfm * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-PromoFeaturesBlock__card_accent-light {
-  background-color: var(--yc-color-base-selection);
+  background-color: var(--pc-color-base-copper);
 }
 .pc-PromoFeaturesBlock__card_primary {
-  background-color: var(--yc-color-promo-base-gold);
+  background-color: var(--pc-color-base-gold);
 }
 @media (min-width: 769px) {
   .pc-PromoFeaturesBlock.pc-AnimateBlock .pc-PromoFeaturesBlock__card-container-column, .pc-AnimateBlock .pc-PromoFeaturesBlock .pc-PromoFeaturesBlock__card-container-column {

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

@@ -12,23 +12,23 @@ unpredictable css rules order in build */
 }
 .pc-QuestionsBlock__item {
   padding-bottom: 32px;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pc-QuestionsBlock__item + .pc-QuestionsBlock__item {
   padding-top: 32px;
 }
 .pc-QuestionsBlock__item-title {
-  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);
   position: relative;
   padding-right: 24px;
   cursor: pointer;
 }
 .pc-QuestionsBlock__item-title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -36,23 +36,23 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-QuestionsBlock__item-title a:hover, .pc-QuestionsBlock__item-title a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-QuestionsBlock__text {
-  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);
   margin-top: 12px;
 }
 .pc-QuestionsBlock__arrow {
   position: absolute;
   right: 0;
   top: 0;
-  color: var(--yc-color-text-info);
+  color: var(--g-color-text-primary);
 }
 .pc-QuestionsBlock__link {
-  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);
 }
 @media (max-width: 769px) {
   .pc-QuestionsBlock__title {

package/build/esm/blocks/Share/Share.css

@@ -5,10 +5,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-share-block__title {
-  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);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   text-align: center;
   font-weight: normal;
 }
@@ -20,27 +20,29 @@ unpredictable css rules order in build */
 .pc-share-block__item.pc-share-block__item {
   display: flex;
   justify-content: center;
-  width: 48px;
+  align-items: center;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 48px !important;
   height: 48px;
   border-radius: 100%;
 }
 .pc-share-block__item.pc-share-block__item_type_vk {
-  background-color: var(--yc-color-vk);
+  background-color: var(--pc-color-vk);
 }
 .pc-share-block__item.pc-share-block__item_type_facebook {
-  background-color: var(--yc-color-facebook);
+  background-color: var(--pc-color-facebook);
 }
 .pc-share-block__item.pc-share-block__item_type_twitter {
-  background-color: var(--yc-color-twitter);
+  background-color: var(--pc-color-twitter);
 }
 .pc-share-block__item.pc-share-block__item_type_telegram {
-  background-color: var(--yc-color-telegram);
+  background-color: var(--pc-color-telegram);
 }
 .pc-share-block__item.pc-share-block__item_type_telegram {
-  background-color: var(--yc-color-telegram);
+  background-color: var(--pc-color-telegram);
 }
 .pc-share-block__item.pc-share-block__item_type_linkedin {
-  background-color: var(--yc-color-linkedin);
+  background-color: var(--pc-color-linkedin);
 }
 .pc-share-block__item.pc-share-block__item.pc-share-block__item.pc-share-block__item:before {
   border-radius: 100%;
@@ -48,14 +50,14 @@ unpredictable css rules order in build */
 
 .pc-share-block__item.pc-share-block__item:hover:before {
   /* stylelint-disable-next-line declaration-no-important */
-  background-color: var(--yc-color-base-generic) !important;
+  background-color: var(--g-color-base-generic) !important;
   border-radius: 100%;
 }
 .pc-share-block__item.pc-share-block__item + .pc-share-block__item.pc-share-block__item {
   margin-left: 12px;
 }
 .pc-share-block__item.pc-share-block__item svg {
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
 }
 
 @media (max-width: 577px) {

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

@@ -3,7 +3,7 @@
 }
 
 .pc-slider-block-arrow__button:hover {
-  box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
@@ -43,14 +43,14 @@ unpredictable css rules order in build */
   cursor: pointer;
   width: 42px;
   height: 42px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   border-radius: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 .pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
 .pc-slider-block-arrow__icon {

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

@@ -143,17 +143,17 @@ unpredictable css rules order in build */
   width: 8px;
   height: 8px;
   border-radius: 100%;
-  background-color: var(--yc-color-line-generic-accent);
+  background-color: var(--g-color-line-generic-accent);
   cursor: pointer;
 }
 .pc-SliderBlock__dot:hover {
-  background-color: var(--yc-color-line-generic-accent-hover);
+  background-color: var(--g-color-line-generic-accent-hover);
 }
 .pc-SliderBlock__dot + .pc-SliderBlock__dot {
   margin-left: 16px;
 }
 .pc-SliderBlock__dot_active {
-  background-color: var(--yc-color-line-generic-active);
+  background-color: var(--g-color-line-generic-active);
 }
 .pc-SliderBlock__bar {
   position: absolute;
@@ -180,19 +180,19 @@ unpredictable css rules order in build */
   position: absolute;
   top: 0;
   left: 0;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_l {
-  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);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_m {
-  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);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_s {
-  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);
 }
 @media (min-width: 769px) {
   .pc-SliderBlock__animate-slides.pc-AnimateBlock .slick-slide, .pc-AnimateBlock .pc-SliderBlock__animate-slides .slick-slide {

package/build/esm/blocks/Table/Table.css

@@ -5,18 +5,18 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-table-block__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);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   top: calc(var(--header-height) + 32px);
   position: sticky;
   margin-right: 32px;
 }
 @media (max-width: 576px) {
   .pc-table-block__title {
-    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);
   }
 }
 .pc-table-block__table {

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

@@ -59,10 +59,10 @@ unpredictable css rules order in build */
   border-radius: var(--pc-border-radius);
 }
 .pc-tabs-block__caption {
-  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);
   margin: 12px 0 0;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-tabs-block__content {
   display: flex;
@@ -81,10 +81,10 @@ unpredictable css rules order in build */
   margin: 0 auto 12px;
 }
 .pc-tabs-block__content-title.pc-tabs-block__content-title > * {
-  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);
 }
 
 @media (max-width: 769px) {

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useRef, useState } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
 import FullscreenImage from '../../components/FullscreenImage/FullscreenImage';
@@ -6,7 +6,7 @@ import { getMediaImage } from '../../components/Media/Image/utils';
 import Media from '../../components/Media/Media';
 import Title from '../../components/Title/Title';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
 import { Content } from '../../sub-blocks';
 import { block, getThemedValue } from '../../utils';
@@ -16,7 +16,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     var _a;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
     const activeTabData = items.find(({ tabName }) => tabName === activeTab);
     const isReverse = direction === 'content-media';

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

@@ -1,9 +1,8 @@
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, QAProps } from '../../models';
 import './Anchor.css';
 export declare const qaIdByDefault = "qa-anchor";
-export interface AnchorProps extends ClassNameProps {
+export interface AnchorProps extends ClassNameProps, QAProps {
     id: string;
-    qa?: string;
 }
 declare const Anchor: ({ id, className, qa }: AnchorProps) => JSX.Element;
 export default Anchor;

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

@@ -1,13 +1,12 @@
 import { CSSProperties } from 'react';
 import { AnimateContextProps } from '../../context/animateContext/AnimateContext';
-import { WithChildren } from '../../models';
-export interface AnimateBlockProps extends AnimateContextProps {
+import { QAProps, WithChildren } from '../../models';
+export interface AnimateBlockProps extends AnimateContextProps, QAProps {
     animate?: boolean;
     offset?: number;
     className?: string;
     style?: CSSProperties;
     onScroll?: () => void;
-    qa?: string;
 }
 declare const AnimateBlock: (props: WithChildren<AnimateBlockProps>) => JSX.Element;
 export default AnimateBlock;

package/build/esm/components/Author/Author.css

@@ -1,11 +1,11 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-author {
-  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);
   display: flex;
   flex-direction: column;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-author__avatar {
   width: 80px;
@@ -23,13 +23,13 @@ unpredictable css rules order in build */
   display: block;
 }
 .pc-author__name {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-primary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-primary);
 }
 .pc-author__description {
-  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-top: 4px;
 }
 .pc-author__label:not(:first-child) {

package/build/esm/components/Author/Author.js

@@ -5,10 +5,10 @@ import { Image } from '../index';
 import './Author.css';
 const b = block('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = AuthorType.Column, dataQa } = props;
+    const { author, className, authorContainerClassName, type = AuthorType.Column, qa } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
-    return (React.createElement("div", { className: b({ type }, className), "data-qa": dataQa },
+    return (React.createElement("div", { className: b({ type }, className), "data-qa": qa },
         avatar && (React.createElement("div", { className: b('avatar', authorContainerClassName) }, typeof avatar === 'string' ? React.createElement(Image, { src: avatar }) : avatar)),
         React.createElement("div", { className: b('label') },
             React.createElement("div", { className: b('name') }, name),

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { BlockBaseProps, ClassNameProps } from '../../models';
+import { BlockBaseProps, ClassNameProps, QAProps } from '../../models';
 import './BlockBase.css';
-export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren;
+export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren & QAProps;
 declare const BlockBase: (props: BlockBaseFullProps) => JSX.Element;
 export default BlockBase;

package/build/esm/components/BlockBase/BlockBase.js

@@ -6,7 +6,7 @@ import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
     const { anchor, visible, children, className, resetPaddings, qa } = props;
-    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
+    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, qa: qa },
         anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
         children));
 };