@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/cjs/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/cjs/blocks/Tabs/Tabs.js

@@ -10,7 +10,7 @@ const utils_1 = require("../../components/Media/Image/utils");
 const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"));
 const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
 const VideoBlock_1 = require("../../components/VideoBlock/VideoBlock");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_2 = require("../../utils");
@@ -19,7 +19,7 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     var _a;
     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 theme = (0, theme_1.useTheme)();
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
     const activeTabData = items.find(({ tabName }) => tabName === activeTab);
     const isReverse = direction === 'content-media';

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

@@ -1,8 +1,7 @@
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, QAProps } from '../../models';
 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/cjs/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/cjs/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/cjs/components/Author/Author.js

@@ -7,10 +7,10 @@ const utils_1 = require("../../utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, dataQa } = props;
+    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
-    return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": dataQa },
+    return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": qa },
         avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, typeof avatar === 'string' ? react_1.default.createElement(index_1.Image, { src: avatar }) : avatar)),
         react_1.default.createElement("div", { className: b('label') },
             react_1.default.createElement("div", { className: b('name') }, name),

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

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

package/build/cjs/components/BlockBase/BlockBase.js

@@ -8,7 +8,7 @@ const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
     const { anchor, visible, children, className, resetPaddings, qa } = props;
-    return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
+    return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, qa: qa },
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
         children));
 };

package/build/cjs/components/Button/Button.css

@@ -12,6 +12,8 @@ unpredictable css rules order in build */
   margin-left: var(--btn-image-margin);
 }
 .pc-button-block_theme_github.pc-button-block_theme_github {
+  --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);
 }
@@ -25,6 +27,8 @@ unpredictable css rules order in build */
   border-radius: 300px;
 }
 .pc-button-block_theme_monochrome {
+  --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);
 }

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

@@ -1,10 +1,9 @@
 import React from 'react';
-import { ButtonProps as ButtonParams } from '../../models';
-export interface ButtonProps extends Omit<ButtonParams, 'url'> {
+import { ButtonProps as ButtonParams, QAProps } from '../../models';
+export interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {
     className?: string;
     url?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const hooks_1 = require("../../hooks");
@@ -14,7 +15,7 @@ const utils_2 = require("./utils");
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
+    const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Button, url);
@@ -35,7 +36,7 @@ const Button = (props) => {
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? uikit_1.Platform.IOS : uikit_1.Platform.ANDROID;
-        return react_1.default.createElement(uikit_1.StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
+        return react_1.default.createElement(components_1.StoreBadge, { className: buttonClass, platform: platform, href: url });
     }
     let icon;
     let image = img && (react_1.default.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt || (0, i18n_1.default)('image-alt') }));

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

@@ -3,6 +3,8 @@ unpredictable css rules order in build */
 .pc-button-tabs__item.pc-button-tabs__item {
   margin-right: 8px;
   margin-bottom: 12px;
+  --g-button-background-color: var(--pc-tab-item-background-color);
+  --g-button-background-color-hover: var(--pc-tab-item-background-color-hover);
   --yc-button-background-color: var(--pc-tab-item-background-color);
   --yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
 }
@@ -14,6 +16,8 @@ unpredictable css rules order in build */
 }
 .pc-button-tabs__item.pc-button-tabs__item_active {
   pointer-events: none;
+  --g-button-background-color: var(--pc-selected-tab-item-background-color);
+  --g-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
   --yc-button-background-color: var(--pc-selected-tab-item-background-color);
   --yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
 }

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
-import { ButtonProps } from '../../models';
+import { ButtonProps, QAProps } from '../../models';
 export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
     id: string | null;
     title: string;
 }
-export interface ButtonTabsProps {
+export interface ButtonTabsProps extends QAProps {
     className?: string;
     items: ButtonTabsItemProps[];
     activeTab?: string | null;
     onSelectTab?: (tabId: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     tabSize?: ButtonSize;
-    qa?: string;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/cjs/components/CardBase/CardBase.css

@@ -15,12 +15,12 @@ unpredictable css rules order in build */
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
   display: flex;
 }
 .pc-card-base-block_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-card-base-block_border_line, .pc-card-base-block_border_none {
   cursor: default;
@@ -42,8 +42,8 @@ unpredictable css rules order in build */
   padding: 32px;
 }
 .pc-card-base-block__body {
-  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);
   flex: 1;
   padding: 32px;
 }
@@ -69,7 +69,7 @@ a.pc-card-base-block {
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 a.pc-card-base-block:hover, a.pc-card-base-block:active {
@@ -77,7 +77,7 @@ a.pc-card-base-block:hover, a.pc-card-base-block:active {
   color: inherit;
 }
 a.pc-card-base-block_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
   cursor: default;

package/build/cjs/components/Control/Control.css

@@ -42,36 +42,36 @@ unpredictable css rules order in build */
   height: 36px;
 }
 .pc-control_theme_primary {
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pc-control_theme_primary:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-control_theme_secondary {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-control_theme_secondary:hover {
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pc-control_theme_link {
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
 }
 .pc-control_theme_link:hover {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-control_theme_accent {
   opacity: 0.7;
-  color: var(--yc-color-text-yandex-red);
+  color: var(--g-color-base-danger-heavy);
 }
 .pc-control_theme_accent:hover {
   opacity: 1;
 }
 .pc-control_disabled {
   cursor: default;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-control_disabled:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 @media (max-width: 768px) {
   .pc-control:hover {

package/build/cjs/components/ErrorWrapper/ErrorWrapper.css

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-ErrorWrapper {
-  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);
   white-space: nowrap;
-  color: var(--yc-color-text-danger);
+  color: var(--g-color-text-danger);
 }
 .pc-ErrorWrapper__text {
   margin-bottom: 5px;

package/build/cjs/components/FileLink/FileLink.css

@@ -1,27 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-file-link {
-  --pc-color-label-background: rgba(0, 0, 0, 0.07);
   align-items: baseline;
 }
-.pc-file-link_ext_pdf {
-  --pc-file-label-color: var(--yc-color-promo-highlight-tomato);
-}
-.pc-file-link_ext_doc {
-  --pc-file-label-color: var(--yc-color-promo-highlight-sky);
-}
-.pc-file-link_ext_xls {
-  --pc-file-label-color: var(--yc-color-promo-highlight-mint);
-}
-.pc-file-link_ext_ppt {
-  --pc-file-label-color: var(--yc-color-promo-highlight-copper);
-}
-.pc-file-link_ext_fig {
-  --pc-file-label-color: var(--yc-color-promo-highlight-neon);
-}
-.pc-file-link_ext_zip {
-  --pc-file-label-color: var(--yc-color-promo-highlight-asphalt);
-}
 .pc-file-link_type_horizontal {
   display: flex;
 }
@@ -29,59 +10,38 @@ unpredictable css rules order in build */
   margin-right: 8px;
 }
 .pc-file-link__file-label {
-  flex: 0 0 auto;
-  width: 44px;
-  height: 24px;
-  line-height: 24px;
-  background-color: var(--pc-file-label-color);
-  color: var(--yc-color-text-light-primary);
-  border-radius: 4px;
-  text-transform: uppercase;
-  text-align: center;
-}
-.pc-file-link__file-label {
-  color: var(--yc-color-text-primary);
   display: flex;
   justify-content: center;
-  flex-direction: column;
+  text-transform: uppercase;
+}
+.pc-file-link__file-label .yc-label__text {
+  width: initial;
 }
 .pc-file-link__link > a {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-file-link__link > a:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-file-link_size_l .pc-file-link__file-label {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  width: 44px;
-  height: 24px;
-  padding: 2px 6px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  width: 52px;
 }
 .pc-file-link_size_m .pc-file-link__file-label, .pc-file-link_size_s .pc-file-link__file-label {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
-  width: 36px;
-  height: 20px;
-  padding: 1px 4px;
-}
-.pc-file-link_theme_dark .pc-file-link__file-label {
-  color: var(--yc-color-text-light-primary);
-  background-color: var(--yc-color-base-light-simple-hover);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  width: 44px;
 }
 .pc-file-link_theme_dark .pc-file-link__link > a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-file-link_theme_dark .pc-file-link__link > a:hover {
-  color: var(--yc-color-text-light-secondary);
-}
-.pc-file-link_theme_light .pc-file-link__file-label {
-  color: var(--yc-color-text-dark-primary);
-  background-color: var(--pc-color-label-background);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-file-link_theme_light .pc-file-link__link > a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
 }
 .pc-file-link_theme_light .pc-file-link__link > a:hover {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }

package/build/cjs/components/FileLink/FileLink.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFileExt = exports.FileExtension = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const locationContext_1 = require("../../context/locationContext");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('file-link');
@@ -24,12 +25,28 @@ function getFileExt(name) {
     return name && name.split('.').pop().toLowerCase();
 }
 exports.getFileExt = getFileExt;
+const FileExtensionThemes = {
+    [FileExtension.PDF]: 'danger',
+    [FileExtension.DOC]: 'info',
+    [FileExtension.XLS]: 'success',
+    [FileExtension.PPT]: 'warning',
+    [FileExtension.FIG]: 'normal',
+    [FileExtension.ZIP]: 'unknown',
+};
+const LabelSizeMap = {
+    l: 's',
+    m: 's',
+    s: 'xs',
+    xs: 'xs',
+};
 const FileLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, } = props;
     const fileExt = getFileExt(href);
+    const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
+    const labelSize = LabelSizeMap[textSize];
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
-        Object.values(FileExtension).includes(fileExt) && (react_1.default.createElement("div", { className: b('file-label') }, fileExt)),
+        react_1.default.createElement(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react_1.default.createElement("div", { className: b('link') },
             react_1.default.createElement("a", Object.assign({ href: href }, (0, utils_1.getLinkProps)(href, hostname), { onClick: onClick }), text))));
 };

package/build/cjs/components/FullWidthBackground/FullWidthBackground.css

@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   z-index: 0;
   pointer-events: none;
 }

package/build/cjs/components/FullscreenImage/FullscreenImage.css

@@ -28,7 +28,7 @@ unpredictable css rules order in build */
   width: 36px;
   height: 36px;
   border-radius: 8px;
-  background-color: var(--yc-color-base-simple-hover-solid);
+  background-color: var(--g-color-base-simple-hover-solid);
   cursor: pointer;
   opacity: 0;
   transition: 0.3s;
@@ -37,10 +37,10 @@ unpredictable css rules order in build */
   opacity: 1;
 }
 .pc-fullscreen-image__icon {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-fullscreen-image__icon_hover:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 @media (max-width: 1185px) {
   .pc-fullscreen-image__modal-image {

package/build/cjs/components/FullscreenMedia/FullscreenMedia.css

@@ -41,7 +41,7 @@ unpredictable css rules order in build */
   width: 36px;
   height: 36px;
   border-radius: 8px;
-  background-color: var(--yc-color-base-simple-hover-solid);
+  background-color: var(--g-color-base-simple-hover-solid);
   cursor: pointer;
   z-index: 10;
 }
@@ -55,10 +55,10 @@ unpredictable css rules order in build */
   pointer-events: inherit;
 }
 .pc-full-screen-media__icon {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-full-screen-media__icon_hover:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 @media (max-width: 577px) {
   .pc-full-screen-media__icon-wrapper {

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css

@@ -8,35 +8,35 @@ unpredictable css rules order in build */
   display: inline-block;
 }
 .pc-header-breadcrumbs__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);
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .utilityfocus .pc-header-breadcrumbs__text:focus {
   outline: 2px solid #ffdb4d;
 }
 .pc-header-breadcrumbs__text:hover, .pc-header-breadcrumbs__text: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-breadcrumbs__text:after {
   content: " / ";
   margin: 0 8px 0 6px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-header-breadcrumbs__text:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:after {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }

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

@@ -1,11 +1,10 @@
 import { CSSProperties, MouseEventHandler } from 'react';
-import { ImageDeviceProps, ImageObjectProps } from '../../models';
-export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
+import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
+export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
-    qa?: string;
 }
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;