@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

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/Author/schema.d.ts

@@ -27,7 +27,9 @@ export declare const author: {
                 };
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

package/build/esm/components/BlockBase/BlockBase.css

@@ -2,12 +2,15 @@
 unpredictable css rules order in build */
 .pc-block-base {
   --anchor-offset: 48px;
+}
+.pc-block-base.pc-block-base {
   margin-top: 48px;
   padding: 0 0 48px;
 }
-.pc-block-base:first-child {
+.pc-block-base.pc-block-base:first-child {
   margin-top: var(--pc-first-block-indent, 96px);
 }
+
 @media only screen and (max-width: 577px) {
   .pc-block-base.pc-block-base {
     margin-top: 32px;

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

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BlockDecoration } from '../../customization/BlockDecoration';
 import { Col } from '../../grid';
 import { block } from '../../utils';
 import Anchor from '../Anchor/Anchor';
@@ -7,9 +6,8 @@ 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 },
-        React.createElement(BlockDecoration, null,
-            anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
-            children)));
+    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));
 };
 export default BlockBase;

package/build/esm/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/esm/components/Button/Button.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as ButtonParams } from '../../models';
+import { ButtonProps as ButtonParams, QAProps } from '../../models';
 import './Button.css';
-export interface ButtonProps extends Omit<ButtonParams, 'url'> {
+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/esm/components/Button/Button.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useCallback, useContext } from 'react';
-import { Button as CommonButton, Icon, Platform, StoreBadge } from '@gravity-ui/uikit';
+import { StoreBadge } from '@gravity-ui/components';
+import { Button as CommonButton, Icon, Platform } from '@gravity-ui/uikit';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useAnalytics } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
@@ -13,7 +14,7 @@ import './Button.css';
 const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
-    const { lang, tld } = useContext(LocaleContext);
+    const { tld } = useContext(LocaleContext);
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
@@ -34,7 +35,7 @@ const Button = (props) => {
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;
-        return React.createElement(StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
+        return React.createElement(StoreBadge, { className: buttonClass, platform: platform, href: url });
     }
     let icon;
     let image = img && (React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt || i18n('image-alt') }));

package/build/esm/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/esm/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
-import { ButtonProps } from '../../models';
+import { ButtonProps, QAProps } from '../../models';
 import './ButtonTabs.css';
 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/esm/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/esm/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/esm/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/esm/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/esm/components/FileLink/FileLink.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { Label } from '@gravity-ui/uikit';
 import { LocationContext } from '../../context/locationContext';
 import { block, getLinkProps } from '../../utils';
 import './FileLink.css';
@@ -20,12 +21,28 @@ export function getFileExt(name) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return name && name.split('.').pop().toLowerCase();
 }
+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 } = useContext(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.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
-        Object.values(FileExtension).includes(fileExt) && (React.createElement("div", { className: b('file-label') }, fileExt)),
+        React.createElement(Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         React.createElement("div", { className: b('link') },
             React.createElement("a", Object.assign({ href: href }, getLinkProps(href, hostname), { onClick: onClick }), text))));
 };

package/build/esm/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/esm/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/esm/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/esm/components/HTML/HTML.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { hasBlockTag } from '../../utils';
 const HTML = ({ children, block = false, className, itemProp }) => {
     if (!children) {
         return null;
     }
-    return React.createElement(block ? 'div' : 'span', {
+    return React.createElement(block || hasBlockTag(children) ? 'div' : 'span', {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,

package/build/esm/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/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -13,6 +13,6 @@ export default function HeaderBreadcrumbs(props) {
         handleAnalytics();
         handleMetrika({ metrikaGoals, pixelEvents });
     }, [handleAnalytics, handleMetrika, metrikaGoals, pixelEvents]);
-    return (React.createElement("div", { className: b({ theme }, className) }, items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
+    return (React.createElement("div", { className: b({ theme }, className) }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
         React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
 }

package/build/esm/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;

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

@@ -1,4 +1,4 @@
-export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
+export declare const imageUrlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
 export declare const ImageDeviceProps: {
     type: string;
     additionalProperties: boolean;
@@ -54,5 +54,6 @@ export declare const ImageProps: {
     } | {
         type: string;
         pattern: string;
+        optionName: string;
     })[];
 };