@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/cjs/components/Link/Link.css

@@ -5,7 +5,7 @@ unpredictable css rules order in build */
 }
 .pc-link-block__link {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -15,14 +15,14 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-link-block__link:hover, .pc-link-block__link: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-link-block__link_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-link-block__link_theme_dark:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-link-block__link_has-arrow {
   display: inherit;
@@ -30,7 +30,7 @@ unpredictable css rules order in build */
 }
 .pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
   --pc-text-header-color: inherit;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-link-block__link_has-arrow .pc-link-block__content {
   white-space: normal;
@@ -39,7 +39,7 @@ unpredictable css rules order in build */
   transform: translateX(5px) rotate(-90deg);
 }
 .pc-link-block__link.pc-link-block__link_has-arrow.pc-link-block__link_theme_dark:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-link-block__arrow {
   position: relative;
@@ -48,17 +48,17 @@ unpredictable css rules order in build */
   transform: rotate(-90deg);
 }
 .pc-link-block_size_l {
-  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);
 }
 .pc-link-block_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-link-block_size_m .pc-link-block__arrow {
   top: 1px;
 }
 .pc-link-block_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }

package/build/cjs/components/Media/Video/Video.js

@@ -47,6 +47,7 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
                 pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-meta-info {
-  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);
   display: flex;
   align-items: center;
   font-weight: 500;

package/build/cjs/components/OverflowScroller/OverflowScroller.css

@@ -28,7 +28,7 @@
   width: 32px;
   height: calc(100% - 1px);
   cursor: pointer;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-overflow-scroller__arrow_type_left {
   left: 0;

package/build/cjs/components/ReactPlayer/CustomBarControls.css

@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   position: relative;
   width: 64px;
   height: 64px;
-  background: var(--yc-color-base-background);
+  background: var(--g-color-base-background);
   transition: background-color 300ms;
 }
 .pc-CustomBarControls__button:hover {

package/build/cjs/components/ReactPlayer/ReactPlayer.css

@@ -28,8 +28,8 @@ unpredictable css rules order in build */
   border-radius: 166px;
 }
 .pc-ReactPlayer__button_theme_blue {
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
 }
 .pc-ReactPlayer__button_theme_grey {
   color: var(--pc-text-header-color);

package/build/cjs/components/Table/Table.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-table {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   margin-top: 32px;
 }
 .pc-table__table {
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
   font-weight: 500;
 }
 .pc-table__row:first-child .pc-table__cell {
-  border-bottom-color: var(--yc-color-line-generic-active);
+  border-bottom-color: var(--g-color-line-generic-active);
   align-items: flex-end;
   padding-top: 0;
 }
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
   display: flex;
   flex: 1;
   align-items: center;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pc-table__cell:first-child {
   flex: 2;
@@ -49,18 +49,18 @@ unpredictable css rules order in build */
   box-sizing: border-box;
 }
 .pc-table__marker_type_disk.pc-table__marker_index_0 {
-  background-color: var(--yc-color-infographics-neutral-light);
+  background-color: var(--g-color-base-neutral-light);
 }
 .pc-table__marker_type_disk.pc-table__marker_index_1 {
-  background-color: var(--yc-my-color-brand-normal);
+  background-color: var(--g-color-base-brand);
 }
 .pc-table__marker_type_disk.pc-table__marker_index_2 {
-  border: 1px solid var(--yc-color-text-hint);
+  border: 1px solid var(--g-color-text-hint);
 }
 .pc-table__legend {
   display: flex;
   margin-top: 20px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-table__legend-item {
   display: flex;

package/build/cjs/components/Title/Title.css

@@ -4,13 +4,13 @@ unpredictable css rules order in build */
   margin-top: 12px;
 }
 .pc-title__description .yfm {
-  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);
 }
 .pc-title__description_titleSize_s, .pc-title__description_titleSize_xs {
   margin-top: 8px;
 }
 .pc-title__description_titleSize_s .yfm, .pc-title__description_titleSize_xs .yfm {
-  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);
 }

package/build/cjs/components/Title/TitleItem.css

@@ -11,42 +11,42 @@ unpredictable css rules order in build */
   text-align: right;
 }
 .pc-title-item_size_xs {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-title-item_size_s {
-  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);
   margin-top: 32px;
 }
 .pc-title-item_size_m {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   margin-top: 48px;
 }
 @media (max-width: 576px) {
   .pc-title-item_size_m {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .pc-title-item_size_l {
-  font-size: var(--yc-text-display-4-font-size);
-  line-height: var(--yc-text-display-4-line-height);
+  font-size: var(--g-text-display-4-font-size);
+  line-height: var(--g-text-display-4-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   margin-top: 96px;
 }
 @media (max-width: 577px) {
   .pc-title-item_size_l {
-    font-size: var(--yc-text-display-2-font-size);
-    line-height: var(--yc-text-display-2-line-height);
+    font-size: var(--g-text-display-2-font-size);
+    line-height: var(--g-text-display-2-line-height);
   }
 }
 .pc-title-item__arrow {
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
 }
 .pc-title-item__text a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -92,8 +92,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-title-item__text a:hover, .pc-title-item__text a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-title-item__wrapper {
   white-space: nowrap;

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,9 +1,8 @@
-import { TextSize, TitleItemProps } from '../../models';
+import { QAProps, TextSize, TitleItemProps } from '../../models';
 export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
-export interface TitleItemFullProps extends TitleItemProps {
+export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;
-    dataQa?: string;
     resetMargin?: boolean;
 }
 declare const TitleItem: (props: TitleItemFullProps) => JSX.Element;

package/build/cjs/components/Title/TitleItem.js

@@ -26,7 +26,7 @@ function getArrowSize(size, isMobile) {
 exports.getArrowSize = getArrowSize;
 const TitleItem = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, dataQa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const textMarkup = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(__1.HTML, { className: b('text') }, text),
@@ -51,7 +51,7 @@ const TitleItem = (props) => {
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),
         react_1.default.createElement((0, utils_1.getHeaderTag)(textSize), {
             className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
-            'data-qa': `${dataQa}-header`,
+            'data-qa': `${qa}-header`,
         }, content)));
 };
 exports.default = TitleItem;

package/build/cjs/components/UnpublishedLabel/UnpublishedLabel.css

@@ -1,16 +1,16 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-unpublished-label {
-  background-color: var(--yc-color-base-danger-heavy);
+  background-color: var(--g-color-base-danger-heavy);
 }
 .pc-unpublished-label_type_line {
-  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);
   padding: 15px;
 }
 .pc-unpublished-label_type_label {
-  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);
   display: inline-block;
   padding: 0 8px;
   border-radius: 2px;

package/build/cjs/components/VideoBlock/VideoBlock.css

@@ -39,8 +39,8 @@ unpredictable css rules order in build */
   position: absolute;
   width: 64px;
   height: 64px;
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
   border-radius: 50%;
 }
 .pc-VideoBlock__icon {

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

@@ -1,4 +1,6 @@
-export declare const DEFAULT_THEME = "light";
+import { Theme } from '../models';
+export declare const DEFAULT_THEME = Theme.Light;
+export declare const UIKIT_ROOT_CLASS = "g-root";
 export declare const KEY: {
     ENTER: string;
     TAB: string;

package/build/cjs/components/constants.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HEADER_HEIGHT = exports.KEY = exports.DEFAULT_THEME = void 0;
-exports.DEFAULT_THEME = 'light';
+exports.HEADER_HEIGHT = exports.KEY = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
+const models_1 = require("../models");
+exports.DEFAULT_THEME = models_1.Theme.Light;
+exports.UIKIT_ROOT_CLASS = 'g-root';
 exports.KEY = {
     ENTER: 'Enter',
     TAB: 'Tab',

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -6,48 +6,68 @@ unpredictable css rules order in build */
   --header-height: 64px;
 }
 
-.yc-root {
-  --yc-text-accent-font-weight: 500;
+.g-root {
+  --pc-color-telegram: #51a4db;
+  --pc-color-facebook: #4968ad;
+  --pc-color-twitter: #4aa0eb;
+  --pc-color-vk: #436eab;
+  --pc-color-youtube: #eb3323;
+  --pc-color-github: #25292e;
+  --pc-color-rss: #f29c39;
+  --pc-color-linkedin: #0a66c2;
+  --g-text-accent-font-weight: 500;
   --pc-transparent: rgba(255, 255, 255, 0);
   --pc-border-radius: 24px;
   --pc-image-padding: 4px;
-  --pc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --pc-color-sfx-shadow: var(--g-color-base-simple-hover);
   --pc-color-line-generic-active-solid: #b3b3b3;
-  --pc-color-base-float-hover: var(--yc-color-base-float);
+  --pc-color-base-float-hover: var(--g-color-base-float);
   --pc-monochrome-button-background-color: #262626;
   --pc-monochrome-button-background-color-hover: #393939;
-  --pc-monochrome-button-color: var(--yc-color-text-light-primary);
-  --pc-text-header-color: var(--yc-color-text-primary);
-  --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
-  --pc-tab-item-color: var(--yc-color-text-primary);
-  --pc-tab-item-background-color: var(--yc-color-base-generic);
-  --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+  --pc-monochrome-button-color: var(--g-color-text-light-primary);
+  --pc-text-header-color: var(--g-color-text-primary);
+  --pc-media-card-meta-info-color: var(--g-color-text-secondary);
+  --pc-tab-item-color: var(--g-color-text-primary);
+  --pc-tab-item-background-color: var(--g-color-base-generic);
+  --pc-tab-item-background-color-hover: var(--g-color-base-generic-hover);
   --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
   --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
   --pc-selected-tab-item-background-color-hover: var(
       --pc-monochrome-button-background-color-hover
   );
 }
-.yc-root.yc-root_theme_dark {
-  --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+.g-root_theme_light {
+  --pc-color-base-silver: #eff2f8;
+  --pc-color-base-gold: #ffdb4d;
+  --pc-color-base-asphalt: #313538;
+  --pc-color-base-copper: #ffe6c4;
+}
+.g-root_theme_dark {
+  --pc-color-base-silver: #bcc0c4;
+  --pc-color-base-gold: #ffde5d;
+  --pc-color-base-asphalt: #474d52;
+  --pc-color-base-copper: #7f7262;
+}
+.g-root.g-root_theme_dark {
+  --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
   --pc-color-line-generic-active-solid: #6c6c70;
-  --pc-color-base-float-hover: var(--yc-color-base-float-hover);
+  --pc-color-base-float-hover: var(--g-color-base-float-hover);
   --pc-monochrome-button-background-color: #ffffff;
   --pc-monochrome-button-background-color-hover: #e9e9e9;
-  --pc-monochrome-button-color: var(--yc-color-text-dark-primary);
+  --pc-monochrome-button-color: var(--g-color-text-dark-primary);
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .yfm_constructor {
-  font-family: var(--yc-font-family-sans);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-sans);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
-  font-family: var(--yc-font-family-monospace);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -58,11 +78,11 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor span,
 .yfm_constructor.yfm_constructor p,
 .yfm_constructor.yfm_constructor li {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor_notice li,
 .yfm_constructor.yfm_constructor_notice p {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
@@ -81,7 +101,7 @@ unpredictable css rules order in build */
 }
 
 .yfm_constructor_theme_dark p {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .yfm_constructor_list_style ul {
   padding-left: 20px;
@@ -97,7 +117,7 @@ unpredictable css rules order in build */
 }
 .yfm_constructor a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -105,17 +125,17 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .yfm_constructor a:hover, .yfm_constructor a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_constructor table {
-  color: var(--yc-color-text-primary);
-  border: 1px solid var(--yc-color-line-generic);
-  background: var(--yc-color-base-background);
+  color: var(--g-color-text-primary);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-background);
 }
 .yfm_constructor thead,
 .yfm_constructor table tr:nth-child(2n) {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 
 .yfm_constructor_table {
@@ -131,7 +151,7 @@ unpredictable css rules order in build */
   background-color: transparent !important;
 }
 .yfm_constructor_table tbody tr {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .yfm_constructor_table td,
 .yfm_constructor_table th {
@@ -152,7 +172,7 @@ unpredictable css rules order in build */
 .pc-page-constructor {
   font-feature-settings: "liga", "kern", "pnum" on, "lnum" on, "ss03" on;
   margin-top: 0;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   z-index: 10;
 }
 .pc-page-constructor__wrapper {

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -4,11 +4,13 @@ exports.PageConstructor = exports.Constructor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@doc-tools/transform/dist/js/yfm");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
+const constants_1 = require("../../components/constants");
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
 const innerContext_1 = require("../../context/innerContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const models_1 = require("../../models");
 const Layout_1 = tslib_1.__importDefault(require("../../navigation/containers/Layout/Layout"));
@@ -17,6 +19,7 @@ const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
+const ycr = (0, bem_cn_lite_1.default)(constants_1.UIKIT_ROOT_CLASS);
 const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
@@ -32,12 +35,12 @@ const Constructor = (props) => {
             },
         },
     }), [custom, shouldRenderBlock]);
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
     const themedBackground = (0, utils_1.getThemedValue)(background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
-        react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b(null, ycr({ theme })) },
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },

package/build/cjs/containers/PageConstructor/Provider.d.ts

@@ -6,15 +6,14 @@ import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { MetrikaContextProps } from '../../context/metrikaContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
-import { ConstructorTheme } from '../../context/theme/ThemeValueContext';
-import { WithChildren } from '../../models';
+import { Theme, WithChildren } from '../../models';
 export interface PageConstructorProviderProps {
     isMobile?: boolean;
     locale?: LocaleContextProps;
     location?: LocationContextProps;
     metrika?: MetrikaContextProps;
     ssrConfig?: SSRContextProps;
-    theme?: ConstructorTheme;
+    theme?: Theme;
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -13,12 +13,12 @@ const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const ssrContext_1 = require("../../context/ssrContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const PageConstructorProvider = (props) => {
     const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
-        react_1.default.createElement(ThemeValueContext_1.ThemeValueContext.Provider, { value: { themeValue: theme } }),
+        react_1.default.createElement(theme_1.ThemeContext.Provider, { value: { theme } }),
         react_1.default.createElement(projectSettingsContext_1.ProjectSettingsContext.Provider, { value: projectSettings }),
         react_1.default.createElement(localeContext_1.LocaleContext.Provider, { value: locale }),
         react_1.default.createElement(imageContext_1.ImageContext.Provider, { value: image }),

package/build/cjs/context/theme/ThemeContext.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ConstructorTheme } from './ThemeValueContext';
+import { Theme } from '../../models';
 export interface ThemeContextProps {
-    theme: ConstructorTheme;
-    setTheme: (newTheme: ConstructorTheme) => void;
+    theme: Theme;
 }
 export declare const initialValue: ThemeContextProps;
 export declare const ThemeContext: React.Context<ThemeContextProps>;

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

@@ -6,6 +6,5 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const constants_1 = require("../../components/constants");
 exports.initialValue = {
     theme: constants_1.DEFAULT_THEME,
-    setTheme: () => { },
 };
 exports.ThemeContext = react_1.default.createContext(exports.initialValue);

package/build/cjs/context/theme/index.d.ts

@@ -1,4 +1,3 @@
 export * from './ThemeContext';
-export * from './ThemeProvider';
 export * from './useTheme';
 export * from './withTheme';

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

@@ -2,6 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ThemeContext"), exports);
-tslib_1.__exportStar(require("./ThemeProvider"), exports);
 tslib_1.__exportStar(require("./useTheme"), exports);
 tslib_1.__exportStar(require("./withTheme"), exports);

package/build/cjs/context/theme/useTheme.d.ts

@@ -1,2 +1,2 @@
 import { ThemeContextProps } from './ThemeContext';
-export declare function useTheme(): [ThemeContextProps['theme'], ThemeContextProps['setTheme']];
+export declare function useTheme(): ThemeContextProps['theme'];

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const ThemeContext_1 = require("./ThemeContext");
 function useTheme() {
-    const { theme, setTheme } = react_1.default.useContext(ThemeContext_1.ThemeContext);
-    return [theme, setTheme];
+    const { theme } = react_1.default.useContext(ThemeContext_1.ThemeContext);
+    return theme;
 }
 exports.useTheme = useTheme;