@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/esm/editor/components/Layout/Layout.css

@@ -1,15 +1,17 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-:root {
-  --editor-header-height: 48px;
-  --editor-divider-width: 12px;
-  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }
 
 .pc-editor-layout__left, .pc-editor-layout__right {
-  --yc-scrollbar-width: 0;
-  height: calc(100vh - var(--editor-header-height));
-  max-height: calc(100vh - var(--editor-header-height));
+  --g-scrollbar-width: 0;
+  height: calc(100vh - var(--pc-editor-header-height));
+  max-height: calc(100vh - var(--pc-editor-header-height));
   overflow-y: auto;
 }
 
@@ -30,8 +32,8 @@ unpredictable css rules order in build */
 .pc-editor-layout__left {
   flex: 0 0 auto;
   padding: 24px 16px;
-  width: var(--editor-left-column-width);
-  border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
+  width: var(--pc-editor-left-column-width);
+  border-right: var(--pc-editor-divider-width) solid var(--g-color-line-generic);
   overflow-x: auto;
 }
 .pc-editor-layout__right {

package/build/esm/editor/components/Layout/Layout.d.ts

@@ -1,12 +1,15 @@
 import React, { PropsWithChildren } from 'react';
+import { Theme } from '../../../models';
 import { ViewModeItem } from '../../types';
 import './Layout.css';
 export interface LayoutProps {
     mode: ViewModeItem;
     onModeChange: (mode: ViewModeItem) => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
 }
 declare const Layout: {
-    ({ children, mode, onModeChange }: PropsWithChildren<LayoutProps>): JSX.Element;
+    ({ children, mode, onModeChange, theme, onThemeChange, }: PropsWithChildren<LayoutProps>): JSX.Element;
     Left: React.FC<{
         children?: React.ReactNode;
     }>;

package/build/esm/editor/components/Layout/Layout.js

@@ -7,7 +7,7 @@ import './Layout.css';
 const b = block('editor-layout');
 const Left = () => null;
 const Right = () => null;
-const Layout = ({ children, mode, onModeChange }) => {
+const Layout = ({ children, mode, onModeChange, theme, onThemeChange, }) => {
     let left, right;
     const isEditingMode = mode === ViewModeItem.Edititng;
     function handleChild(child) {
@@ -24,7 +24,7 @@ const Layout = ({ children, mode, onModeChange }) => {
         Children.forEach(children, handleChild);
     }
     return (React.createElement("div", { className: b() },
-        React.createElement(ControlPanel, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel') }),
+        React.createElement(ControlPanel, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel'), theme: theme, onThemeChange: onThemeChange }),
         React.createElement("div", { className: b('container') },
             React.createElement(Fragment, null,
                 left && React.createElement("div", { className: b('left') }, left),

package/build/esm/editor/components/NotFoundBlock/NotFoundBlock.css

@@ -3,19 +3,19 @@
 }
 
 .pc-not-found-block: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;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-not-found-block {
-  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);
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
-  background-color: var(--yc-color-promo-highlight-silver);
+  background-color: var(--pc-color-highlight-silver);
   border-radius: var(--pc-border-radius);
 }

package/build/esm/editor/containers/Editor/Editor.js

@@ -14,7 +14,7 @@ import { addCustomDecorator, checkIsMobile, getBlockId } from '../../utils';
 import { Form } from '../Form/Form';
 export const Editor = (_a) => {
     var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
-    const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = useEditorState(rest);
+    const { content, activeBlockIndex, errorBoundaryState, viewMode, theme, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, onThemeUpdate, } = useEditorState(rest);
     const formSpecs = useFormSpec(customSchema);
     const isEditingMode = viewMode === ViewModeItem.Edititng;
     const transformedContent = useMemo(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
@@ -45,19 +45,19 @@ export const Editor = (_a) => {
             content: transformedContent,
             custom: rest.custom,
         },
-        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode) }),
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme }),
         deviceEmulationSettings,
-    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings]);
+    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme]);
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
     return (React.createElement(EditorContext.Provider, { value: context },
-        React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate },
+        React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
             isEditingMode && (React.createElement(Layout.Left, null,
                 React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
             React.createElement(Layout.Right, null,
                 React.createElement(ErrorBoundary, { key: errorBoundaryState },
-                    React.createElement(PageConstructorProvider, Object.assign({}, providerProps),
+                    React.createElement(PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),
                         React.createElement(PageConstructor, Object.assign({}, outgoingProps)))),
                 isEditingMode && React.createElement(AddBlock, { onAdd: onAdd })))));
 };

package/build/esm/editor/containers/Form/Form.css

@@ -1,14 +1,14 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-editor-form {
-  --top-level-font-size: var(--yc-text-display-2-font-size);
-  --top-level-line-height: var(--yc-text-display-2-line-height);
-  --block-level-complex-propery-font-size: var(--yc-text-body-3-font-size);
-  --block-level-complex-property-line-height: var(--yc-text-body-3-line-height);
-  --complex-property-font-size: var(--yc-text-body-2-font-size);
-  --complex-property-line-height: var(--yc-text-body-2-line-height);
-  --property-font-size: var(--yc-text-body-1-font-size);
-  --property-line-height: var(--yc-text-body-1-line-height);
+  --top-level-font-size: var(--g-text-display-2-font-size);
+  --top-level-line-height: var(--g-text-display-2-line-height);
+  --block-level-complex-propery-font-size: var(--g-text-body-3-font-size);
+  --block-level-complex-property-line-height: var(--g-text-body-3-line-height);
+  --complex-property-font-size: var(--g-text-body-2-font-size);
+  --complex-property-line-height: var(--g-text-body-2-line-height);
+  --property-font-size: var(--g-text-body-1-font-size);
+  --property-line-height: var(--g-text-body-1-line-height);
   --input-min-width: 150px;
   --property-title-width: 96px;
   --button-height: 48px;
@@ -63,7 +63,7 @@ unpredictable css rules order in build */
   line-height: var(--header-line-height);
 }
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
-  --yc-button-height: var(--button-height);
+  --g-button-height: var(--button-height);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -71,7 +71,7 @@ unpredictable css rules order in build */
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon-inner > svg {
   width: var(--icon-size);
   height: var(--icon-size);
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon_side_right ~ .yc-button__text {
   margin-right: var(--icon-margin);
@@ -90,7 +90,7 @@ unpredictable css rules order in build */
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 12px;
-  border-left: 1px solid var(--yc-color-line-generic-accent);
+  border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .pc-editor-form .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
   padding-left: 12px;
@@ -104,7 +104,7 @@ unpredictable css rules order in build */
   margin-top: 12px;
 }
 .pc-editor-form__tabs {
-  --yc-color-base-special: var(--yc-color-promo-base-neon);
+  --g-color-base-brand: var(--pc-color-base-neon);
   margin-bottom: 20px;
 }
 .pc-editor-form__block-form {

package/build/esm/editor/data/previews/default-preview.js

@@ -10,6 +10,6 @@ const DefaultPreview = (props) => (React.createElement("svg", Object.assign({ wi
     React.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }),
     React.createElement("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
     React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
-    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
     React.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
 export default DefaultPreview;

package/build/esm/editor/data/previews/header-block.js

@@ -2,15 +2,15 @@ import React from 'react';
 import { a11yHiddenSvgProps } from '../../../utils/svg';
 const Header = (props) => (React.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
     React.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
-    React.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    React.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
     React.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
-    React.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#A967FF" }),
+    React.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "currentColor" }),
     React.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
     React.createElement("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
     React.createElement("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
     React.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
-    React.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
-    React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
-    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    React.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }),
+    React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }),
+    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
     React.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
 export default Header;

package/build/esm/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css

@@ -14,7 +14,7 @@
   margin-top: 4px;
   margin-bottom: 20px;
   margin-left: 5px;
-  border-left: 1px solid var(--yc-color-line-generic-accent);
+  border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .pc-one-of-custom .df-group-indent > .df-use-search:empty {
   display: none;

package/build/esm/editor/store/index.d.ts

@@ -1,4 +1,4 @@
-import { Block, BlockDecorationProps, PageContent } from '../../models';
+import { Block, BlockDecorationProps, PageContent, Theme } from '../../models';
 import { EditBlockProps, EditorProps, ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
@@ -6,9 +6,11 @@ export declare function useEditorState({ content: intialContent, custom }: Omit<
     content: PageContent;
     errorBoundaryState: number;
     viewMode: ViewModeItem;
+    theme: Theme;
     injectEditBlockProps: ({ type, index: relativeIndex, children, ...rest }: BlockDecorationProps) => EditBlockProps;
     onAdd: (block: Block) => void;
     onSelect: (index: number) => void;
     onContentUpdate: (newContent: PageContent) => void;
     onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onThemeUpdate: (newTheme: Theme) => void;
 };

package/build/esm/editor/store/index.js

@@ -1,17 +1,19 @@
 import { __rest } from "tslib";
 import { useMemo, useReducer } from 'react';
+import { DEFAULT_THEME } from '../../components/constants';
 import { HeaderBlockTypes } from '../../models';
 import { getCustomHeaderTypes, getHeaderBlock } from '../../utils';
 import { EditBlockControls } from '../components/EditBlock/EditBlock';
 import { ViewModeItem } from '../types';
-import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, UPDATE_VIEW_MODE, reducer, } from './reducer';
+import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, UPDATE_THEME, UPDATE_VIEW_MODE, reducer, } from './reducer';
 import { addEditorProps } from './utils';
 export function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState, viewMode }, dispatch] = useReducer(reducer, {
+    const [{ activeBlockIndex, content, errorBoundaryState, viewMode, theme }, dispatch] = useReducer(reducer, {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: addEditorProps(intialContent),
         viewMode: ViewModeItem.Edititng,
+        theme: DEFAULT_THEME,
     });
     return useMemo(() => {
         const headerBlockTypes = [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)];
@@ -34,6 +36,7 @@ export function useEditorState({ content: intialContent, custom }) {
         const onSelect = (index) => dispatch({ type: SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: UPDATE_CONTENT, payload: newContent });
         const onViewModeUpdate = (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode });
+        const onThemeUpdate = (newTheme) => dispatch({ type: UPDATE_THEME, payload: newTheme });
         const injectEditBlockProps = (_a) => {
             var { type, index: relativeIndex = 0, children } = _a, rest = __rest(_a, ["type", "index", "children"]);
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
@@ -68,11 +71,13 @@ export function useEditorState({ content: intialContent, custom }) {
             content,
             errorBoundaryState,
             viewMode,
+            theme,
             injectEditBlockProps,
             onAdd,
             onSelect,
             onContentUpdate,
             onViewModeUpdate,
+            onThemeUpdate,
         };
-    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode]);
+    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode, theme]);
 }

package/build/esm/editor/store/reducer.d.ts

@@ -1,4 +1,4 @@
-import { Block, PageContent } from '../../models';
+import { Block, PageContent, Theme } from '../../models';
 import { ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 interface EditorState {
@@ -6,6 +6,7 @@ interface EditorState {
     activeBlockIndex: number;
     errorBoundaryState: number;
     viewMode: ViewModeItem;
+    theme: Theme;
 }
 interface OrderBlockParams {
     oldIndex: number;
@@ -23,6 +24,7 @@ export declare const SET_REGION = "SET_REGION";
 export declare const ORDER_BLOCK = "ORDER_BLOCK";
 export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
 export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
+export declare const UPDATE_THEME = "UPDATE_THEME";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
     payload: number;
@@ -51,6 +53,10 @@ interface UpdateViewMode {
     type: typeof UPDATE_VIEW_MODE;
     payload: ViewModeItem;
 }
-export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode;
+interface UpdateTheme {
+    type: typeof UPDATE_THEME;
+    payload: Theme;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode | UpdateTheme;
 export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
 export {};

package/build/esm/editor/store/reducer.js

@@ -8,6 +8,7 @@ export const SET_REGION = 'SET_REGION';
 export const ORDER_BLOCK = 'ORDER_BLOCK';
 export const UPDATE_CONTENT = 'UPDATE_CONTENT';
 export const UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+export const UPDATE_THEME = 'UPDATE_THEME';
 // reducer
 export const reducer = (state, action) => {
     const { content } = state;
@@ -35,6 +36,8 @@ export const reducer = (state, action) => {
         }
         case UPDATE_VIEW_MODE:
             return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case UPDATE_THEME:
+            return Object.assign(Object.assign({}, state), { theme: action.payload });
         default:
             return state;
     }

package/build/esm/editor/styles/root.css

@@ -1,5 +1,7 @@
-:root {
-  --editor-header-height: 48px;
-  --editor-divider-width: 12px;
-  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }

package/build/esm/grid/Col/Col.d.ts

@@ -1,10 +1,9 @@
 import React, { CSSProperties } from 'react';
-import { Refable } from '../../models/common';
+import { QAProps, Refable } from '../../models/common';
 import { WithChildren } from '../../models/react';
 import { GridColumnClassParams } from '../types';
-export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement> {
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps {
     style?: CSSProperties;
-    dataQa?: string;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/grid/Col/Col.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { getColClass } from '../utils';
 export const Col = forwardRef((props, ref) => {
-    const { children, style, dataQa } = props, rest = __rest(props, ["children", "style", "dataQa"]);
-    return (React.createElement("div", { ref: ref, className: getColClass(rest), style: style, "data-qa": dataQa }, children));
+    const { children, style, qa } = props, rest = __rest(props, ["children", "style", "qa"]);
+    return (React.createElement("div", { ref: ref, className: getColClass(rest), style: style, "data-qa": qa }, children));
 });
 Col.displayName = 'Col';

package/build/esm/grid/Grid/Grid.css

@@ -17,7 +17,7 @@
 .pc-Grid_debug .container-fluid,
 .pc-Grid_debug [class*=col-] {
   box-sizing: border-box;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 @media only screen and (max-width: 577px) {
   .pc-Grid .container,

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

@@ -7,6 +7,7 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+export declare const themeNames: Record<Theme, string>;
 /**
  * @deprecated Pixel will be deleted
  */
@@ -63,6 +64,9 @@ export interface Metrika {
 export interface ClassNameProps {
     className?: string;
 }
+export interface QAProps {
+    qa?: string;
+}
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
 export declare enum PredefinedEventTypes {
     Default = "default-event",

package/build/esm/models/common.js

@@ -3,6 +3,10 @@ export var Theme;
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme || (Theme = {}));
+export const themeNames = {
+    [Theme.Light]: 'Light',
+    [Theme.Dark]: 'Dark',
+};
 /**
  * @deprecated Pixel will be deleted from package
  */

package/build/esm/models/constructor-items/blocks.d.ts

@@ -249,10 +249,6 @@ interface ContentLayoutBlockParams {
     textWidth?: ContentTextSize;
 }
 export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
-    /**
-     * @deprecated Use params on top level instead
-     */
-    properties?: ContentLayoutBlockParams;
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }

package/build/esm/models/constructor-items/common.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -90,11 +90,10 @@ export interface ImageDeviceProps extends ImageInfoProps {
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
-    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
@@ -327,12 +326,11 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface AuthorProps {
+export interface AuthorProps extends QAProps {
     author: AuthorItem;
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
-    dataQa?: string;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

package/build/esm/navigation/components/DesktopNavigation/DesktopNavigation.css

@@ -30,8 +30,8 @@ unpredictable css rules order in build */
 .pc-desktop-navigation__right {
   flex: 0;
   justify-content: flex-end;
-  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-desktop-navigation__navigation-container {
   display: flex;
@@ -65,8 +65,8 @@ unpredictable css rules order in build */
 }
 .pc-desktop-navigation__links {
   position: relative;
-  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-desktop-navigation__item {
   position: relative;

package/build/esm/navigation/components/Logo/Logo.css

@@ -14,9 +14,9 @@ unpredictable css rules order in build */
   object-fit: contain;
 }
 .pc-logo__text {
-  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);
   white-space: nowrap;
 }

package/build/esm/navigation/components/Logo/Logo.js

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Image } from '../../../components';
 import { getMediaImage } from '../../../components/Media/Image/utils';
 import RouterLink from '../../../components/RouterLink/RouterLink';
-import { ThemeValueContext } from '../../../context/theme/ThemeValueContext';
+import { useTheme } from '../../../context/theme';
 import { block, getThemedValue } from '../../../utils';
 import './Logo.css';
 const b = block('logo');
 const Logo = (props) => {
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const themedLogoProps = getThemedValue(props, theme) || props;
     const imageData = getMediaImage(themedLogoProps.icon || props.icon);
     const textData = themedLogoProps.text || props.text;

package/build/esm/navigation/components/MobileNavigation/MobileNavigation.css

@@ -8,14 +8,14 @@ unpredictable css rules order in build */
   width: 100%;
   border-bottom-right-radius: var(--pc-border-radius);
   border-bottom-left-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-background);
-  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+  background-color: var(--g-color-base-background);
+  box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
   max-height: calc(100vh - 2 * var(--header-height));
   overflow-y: scroll;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  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-mobile-navigation::-webkit-scrollbar {
   display: none;
@@ -53,11 +53,11 @@ unpredictable css rules order in build */
   flex-direction: column;
   min-width: 220px;
   padding: 16px;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
   border-top-width: 0;
   border-radius: calc(var(--pc-border-radius) / 2);
-  background: var(--yc-color-base-float);
-  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+  background: var(--g-color-base-float);
+  box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
 @media (min-width: 769px) {
   .pc-mobile-navigation__popup {

package/build/esm/navigation/components/Navigation/Navigation.css

@@ -8,8 +8,8 @@ unpredictable css rules order in build */
   justify-content: center;
   align-items: center;
   height: var(--header-height);
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-navigation_with-border {
-  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
+  box-shadow: inset 0 -1px 0 var(--g-color-line-generic);
 }

package/build/esm/navigation/components/NavigationItem/NavigationItem.css

@@ -13,7 +13,7 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-navigation-item__content:hover, .pc-navigation-item__content:active {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-navigation-item_menu-layout_desktop {
   height: var(--header-height);

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -6,5 +6,5 @@
 }
 .pc-navigation-dropdown__arrow {
   margin-left: 7px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -1,7 +1,7 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation-link {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
   color: inherit;
   text-decoration: none;
   outline: none;
@@ -14,7 +14,7 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-navigation-link:hover, .pc-navigation-link_active {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-navigation-link__arrow {
   position: relative;