@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/cjs/context/theme/withTheme.js

@@ -9,7 +9,7 @@ function withTheme(WrappedComponent) {
     const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     return _a = class WithThemeComponent extends react_1.default.Component {
             render() {
-                return (react_1.default.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme, setTheme: this.context.setTheme })));
+                return react_1.default.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme }));
             }
         },
         _a.displayName = `withTheme(${componentName})`,

package/build/cjs/editor/components/AddBlock/AddBlock.css

@@ -3,7 +3,7 @@ unpredictable css rules order in build */
 .pc-add-block {
   position: absolute;
   bottom: 32px;
-  left: calc(50% + var(--editor-left-column-width) / 2);
+  left: calc(50% + var(--pc-editor-left-column-width) / 2);
   transform: translateX(-50%);
   z-index: 110;
 }
@@ -23,8 +23,8 @@ unpredictable css rules order in build */
   transition: transform 0.2s;
   width: 76px;
   height: 40px;
-  color: var(--yc-color-text-inverted-primary);
-  background-color: var(--yc-color-promo-base-neon);
+  color: var(--g-color-text-primary);
+  background-color: var(--pc-editor-base-color);
   border-radius: 8px;
 }
 .pc-add-block__button:hover {
@@ -71,10 +71,11 @@ unpredictable css rules order in build */
   height: 74px;
   border-radius: var(--pc-border-radius);
   margin-right: 16px;
+  color: var(--pc-editor-base-color);
 }
 .pc-add-block__popup .pc-add-block__title {
-  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-add-block__popup .pc-add-block__title,
 .pc-add-block__popup .pc-add-block__description {

package/build/cjs/editor/components/AddBlock/AddBlock.js

@@ -22,7 +22,7 @@ const AddBlock = ({ onAdd, className }) => {
                 setSearch('');
             } },
             react_1.default.createElement(icons_1.Plus, { className: b('icon') })),
-        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, className: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
+        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, contentClassName: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
             react_1.default.createElement("div", { className: b('search') },
                 react_1.default.createElement(uikit_1.TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             react_1.default.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {

package/build/cjs/editor/components/ControlPanel/ControlPanel.css

@@ -1,13 +1,13 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-control-panel {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   width: 100%;
-  height: var(--editor-header-height);
+  height: var(--pc-editor-header-height);
   padding: 8px 20px;
-  background-color: var(--yc-color-base-background);
-  border: 1px var(--yc-color-line-generic);
+  background-color: var(--g-color-base-background);
+  border: 1px var(--g-color-line-generic);
   border-style: solid none;
 }
 .pc-control-panel__icon {
@@ -24,4 +24,11 @@ unpredictable css rules order in build */
 .pc-control-panel__mode-switch {
   display: flex;
   align-items: center;
+  place-self: center;
+}
+.pc-control-panel__theme-switch {
+  place-self: center end;
+  display: flex;
+  gap: 12px;
+  align-items: center;
 }

package/build/cjs/editor/components/ControlPanel/ControlPanel.d.ts

@@ -1,8 +1,10 @@
-import { ClassNameProps } from '../../../models';
+import { ClassNameProps, Theme } from '../../../models';
 import { ViewModeItem } from '../../types';
 export interface ControlPanelProps extends ClassNameProps {
     viewMode?: ViewModeItem;
     onViewModeChange: (viewMode: ViewModeItem) => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
 }
-declare const ControlPanel: ({ viewMode, onViewModeChange, className, }: ControlPanelProps) => JSX.Element;
+declare const ControlPanel: ({ viewMode, onViewModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
 export default ControlPanel;

package/build/cjs/editor/components/ControlPanel/ControlPanel.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
 const Tablet_1 = require("../../icons/Tablet");
 const types_1 = require("../../types");
@@ -16,13 +17,19 @@ const ControlPanelViewModeIcons = {
     [types_1.ViewModeItem.Tablet]: Tablet_1.Tablet,
     [types_1.ViewModeItem.Mobile]: icons_1.Smartphone,
 };
-const ControlPanel = ({ viewMode = types_1.ViewModeItem.Edititng, onViewModeChange, className, }) => (react_1.default.createElement("div", { className: b(null, className) },
-    react_1.default.createElement("div", { className: b('mode-switch') },
-        react_1.default.createElement("span", null, (0, i18n_1.default)('mode')),
-        react_1.default.createElement(uikit_1.RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(types_1.ViewModeItem).map((item) => {
-            const Icon = ControlPanelViewModeIcons[item];
-            return (react_1.default.createElement(uikit_1.RadioButton.Option, { key: item, value: item },
-                react_1.default.createElement("span", { className: b('icon') },
-                    react_1.default.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-        })))));
+const ControlPanel = ({ viewMode = types_1.ViewModeItem.Edititng, onViewModeChange, className, theme, onThemeChange, }) => {
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", { className: b('mode-switch') },
+            react_1.default.createElement("span", null, (0, i18n_1.default)('mode')),
+            react_1.default.createElement(uikit_1.RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(types_1.ViewModeItem).map((item) => {
+                const Icon = ControlPanelViewModeIcons[item];
+                return (react_1.default.createElement(uikit_1.RadioButton.Option, { key: item, value: item },
+                    react_1.default.createElement("span", { className: b('icon') },
+                        react_1.default.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+            }))),
+        react_1.default.createElement("div", { className: b('theme-switch') },
+            react_1.default.createElement("span", null, (0, i18n_1.default)('Theme')),
+            react_1.default.createElement(uikit_1.Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(models_1.Theme).map((item) => (react_1.default.createElement(uikit_1.Select.Option, { key: item, value: item }, models_1.themeNames[item])))))));
+};
 exports.default = ControlPanel;

package/build/cjs/editor/components/EditBlock/EditBlock.css

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   z-index: 11;
 }
 .pc-edit-block_active .pc-edit-block__controls {
-  border: 4px solid var(--yc-color-promo-base-neon);
+  border: 4px solid var(--pc-editor-base-color);
 }
 .pc-edit-block__controls {
   position: absolute;
@@ -45,7 +45,7 @@ unpredictable css rules order in build */
   width: 48px;
   height: 32px;
   border-radius: 8px;
-  background-color: var(--yc-color-promo-highlight-neon);
+  background-color: var(--pc-editor-control-color);
 }
 .pc-edit-block__control:hover {
   transform: scale(1.1);

package/build/cjs/editor/components/ErrorBoundary/ErrorBoundary.css

@@ -4,7 +4,7 @@ unpredictable css rules order in build */
   display: flex;
   width: 100%;
   padding: 32px;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   border-radius: var(--pc-border-radius);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 4px 24px rgba(0, 0, 0, 0.06);
 }
@@ -13,7 +13,7 @@ unpredictable css rules order in build */
 }
 .pc-error-boundary__error {
   display: block;
-  color: var(--yc-color-text-danger);
+  color: var(--g-color-text-danger);
   max-height: 160px;
   overflow: auto;
 }

package/build/cjs/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/cjs/editor/components/Layout/Layout.d.ts

@@ -1,11 +1,14 @@
 import React, { PropsWithChildren } from 'react';
+import { Theme } from '../../../models';
 import { ViewModeItem } from '../../types';
 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/cjs/editor/components/Layout/Layout.js

@@ -9,7 +9,7 @@ const DeviceEmulation_1 = tslib_1.__importDefault(require("../DeviceEmulation/De
 const b = (0, utils_1.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 === types_1.ViewModeItem.Edititng;
     function handleChild(child) {
@@ -26,7 +26,7 @@ const Layout = ({ children, mode, onModeChange }) => {
         react_1.Children.forEach(children, handleChild);
     }
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement(ControlPanel_1.default, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel') }),
+        react_1.default.createElement(ControlPanel_1.default, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel'), theme: theme, onThemeChange: onThemeChange }),
         react_1.default.createElement("div", { className: b('container') },
             react_1.default.createElement(react_1.Fragment, null,
                 left && react_1.default.createElement("div", { className: b('left') }, left),

package/build/cjs/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/cjs/editor/containers/Editor/Editor.js

@@ -17,7 +17,7 @@ const utils_1 = require("../../utils");
 const Form_1 = require("../Form/Form");
 const Editor = (_a) => {
     var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
-    const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, store_1.useEditorState)(rest);
+    const { content, activeBlockIndex, errorBoundaryState, viewMode, theme, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, onThemeUpdate, } = (0, store_1.useEditorState)(rest);
     const formSpecs = (0, useFormSpec_1.default)(customSchema);
     const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
     const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
@@ -48,19 +48,19 @@ const Editor = (_a) => {
             content: transformedContent,
             custom: rest.custom,
         },
-        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode) }),
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme }),
         deviceEmulationSettings,
-    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings]);
+    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme]);
     (0, react_1.useEffect)(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
     return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
-        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate },
+        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
             isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
                 react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
             react_1.default.createElement(Layout_1.default.Right, null,
                 react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState },
-                    react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps),
+                    react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),
                         react_1.default.createElement(PageConstructor_1.PageConstructor, Object.assign({}, outgoingProps)))),
                 isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })))));
 };

package/build/cjs/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/cjs/editor/data/previews/default-preview.js

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

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

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

package/build/cjs/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/cjs/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/cjs/editor/store/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEditorState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
+const constants_1 = require("../../components/constants");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const EditBlock_1 = require("../components/EditBlock/EditBlock");
@@ -10,11 +11,12 @@ const types_1 = require("../types");
 const reducer_1 = require("./reducer");
 const utils_2 = require("./utils");
 function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState, viewMode }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
+    const [{ activeBlockIndex, content, errorBoundaryState, viewMode, theme }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: (0, utils_2.addEditorProps)(intialContent),
         viewMode: types_1.ViewModeItem.Edititng,
+        theme: constants_1.DEFAULT_THEME,
     });
     return (0, react_1.useMemo)(() => {
         const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)];
@@ -37,6 +39,7 @@ function useEditorState({ content: intialContent, custom }) {
         const onSelect = (index) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: reducer_1.UPDATE_CONTENT, payload: newContent });
         const onViewModeUpdate = (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode });
+        const onThemeUpdate = (newTheme) => dispatch({ type: reducer_1.UPDATE_THEME, payload: newTheme });
         const injectEditBlockProps = (_a) => {
             var { type, index: relativeIndex = 0, children } = _a, rest = tslib_1.__rest(_a, ["type", "index", "children"]);
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
@@ -71,12 +74,14 @@ 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]);
 }
 exports.useEditorState = useEditorState;

package/build/cjs/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/cjs/editor/store/reducer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.UPDATE_VIEW_MODE = exports.UPDATE_CONTENT = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
+exports.reducer = exports.UPDATE_THEME = exports.UPDATE_VIEW_MODE = exports.UPDATE_CONTENT = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
 const utils_1 = require("./utils");
 // actions
 exports.SELECT_BLOCK = 'SELECT_BLOCK';
@@ -11,6 +11,7 @@ exports.SET_REGION = 'SET_REGION';
 exports.ORDER_BLOCK = 'ORDER_BLOCK';
 exports.UPDATE_CONTENT = 'UPDATE_CONTENT';
 exports.UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+exports.UPDATE_THEME = 'UPDATE_THEME';
 // reducer
 const reducer = (state, action) => {
     const { content } = state;
@@ -38,6 +39,8 @@ const reducer = (state, action) => {
         }
         case exports.UPDATE_VIEW_MODE:
             return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case exports.UPDATE_THEME:
+            return Object.assign(Object.assign({}, state), { theme: action.payload });
         default:
             return state;
     }

package/build/cjs/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/cjs/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/cjs/grid/Col/Col.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../utils");
 exports.Col = (0, react_1.forwardRef)((props, ref) => {
-    const { children, style, dataQa } = props, rest = tslib_1.__rest(props, ["children", "style", "dataQa"]);
-    return (react_1.default.createElement("div", { ref: ref, className: (0, utils_1.getColClass)(rest), style: style, "data-qa": dataQa }, children));
+    const { children, style, qa } = props, rest = tslib_1.__rest(props, ["children", "style", "qa"]);
+    return (react_1.default.createElement("div", { ref: ref, className: (0, utils_1.getColClass)(rest), style: style, "data-qa": qa }, children));
 });
 exports.Col.displayName = 'Col';

package/build/cjs/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/cjs/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/cjs/models/common.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.themeNames = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme = exports.Theme || (exports.Theme = {}));
+exports.themeNames = {
+    [Theme.Light]: 'Light',
+    [Theme.Dark]: 'Dark',
+};
 /**
  * @deprecated Pixel will be deleted from package
  */