@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css

@@ -8,8 +8,8 @@ unpredictable css rules order in build */
   padding-left: 10px;
 }
 .pc-hubspot-form .hs-form-field > label {
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
   display: flex;
   width: 200px;
   max-width: 100%;
@@ -42,11 +42,11 @@ unpredictable css rules order in build */
   font-size: 15px;
   line-height: 16px;
   font-weight: normal;
-  font-family: var(--yc-text-body-font-family);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-text-body-font-family);
+  color: var(--g-color-text-primary);
   background-color: transparent;
-  border: 1px solid var(--yc-color-line-generic);
-  border-radius: var(--yc-border-radius-l);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-l);
 }
 .pc-hubspot-form .hs-form-field .input input[type=text]:hover,
 .pc-hubspot-form .hs-form-field .input input[type=number]:hover,
@@ -54,7 +54,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=email]:hover,
 .pc-hubspot-form .hs-form-field .input textarea:hover,
 .pc-hubspot-form .hs-form-field .input select:hover {
-  border: 1px solid var(--yc-color-line-generic-hover);
+  border: 1px solid var(--g-color-line-generic-hover);
 }
 .pc-hubspot-form .hs-form-field .input input[type=text]::placeholder,
 .pc-hubspot-form .hs-form-field .input input[type=number]::placeholder,
@@ -62,7 +62,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=email]::placeholder,
 .pc-hubspot-form .hs-form-field .input textarea::placeholder,
 .pc-hubspot-form .hs-form-field .input select::placeholder {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-hubspot-form .hs-form-field .input input[type=text]:focus,
 .pc-hubspot-form .hs-form-field .input input[type=number]:focus,
@@ -77,7 +77,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=tel]:focus,
 .pc-hubspot-form .hs-form-field .input input[type=email]:focus,
 .pc-hubspot-form .hs-form-field .input textarea:focus {
-  border: 2px solid var(--yc-color-base-special);
+  border: 2px solid var(--g-color-base-brand);
   outline: none;
 }
 .pc-hubspot-form .hs-form-field .input textarea {
@@ -97,7 +97,7 @@ unpredictable css rules order in build */
   padding-right: 30px;
 }
 .pc-hubspot-form .hs-form-field .input select:focus {
-  border: 1px solid var(--yc-color-line-generic-active);
+  border: 1px solid var(--g-color-line-generic-active);
 }
 .pc-hubspot-form .hs-form-field:not(.hs-fieldtype-textarea):not(.hs-fieldtype-booleancheckbox) {
   display: flex;
@@ -129,8 +129,8 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-checkbox-display span:not(.hs-form-required),
 .pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display span:not(.hs-form-required),
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:not(.hs-form-required) {
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
   line-height: 16px;
   padding-left: 7px;
   margin: 0;
@@ -155,7 +155,7 @@ unpredictable css rules order in build */
   width: 17px;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid var(--yc-color-line-generic-accent);
+  border: 1px solid var(--g-color-line-generic-accent);
   transition: background-color 0.1s linear;
 }
 .pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display span:not(.hs-form-required):after,
@@ -188,7 +188,7 @@ unpredictable css rules order in build */
   width: 17px;
   background-color: transparent;
   border-radius: 50%;
-  border: 1px solid var(--yc-color-line-generic-accent);
+  border: 1px solid var(--g-color-line-generic-accent);
   transition: background-color 0.1s linear;
 }
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:after {
@@ -217,18 +217,18 @@ unpredictable css rules order in build */
   padding-left: 10px;
 }
 .pc-hubspot-form .hs-richtext p {
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  font-weight: var(--yc-text-body-font-weight);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
   margin: 0 0 20px;
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
-  font-weight: var(--yc-text-body-font-weight);
-  color: var(--yc-color-text-danger);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+  color: var(--g-color-text-danger);
 }
 .pc-hubspot-form .inputs-list {
   list-style: none;
@@ -236,7 +236,7 @@ unpredictable css rules order in build */
   margin: 0;
 }
 .pc-hubspot-form .hs-form-required {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
   width: 10px;
   order: 1;
   position: absolute;
@@ -246,8 +246,8 @@ unpredictable css rules order in build */
   order: 3;
   padding: 0;
   margin: 3px 0 0;
-  font-size: var(--yc-text-body-1-font-size);
-  color: var(--yc-color-text-complementary);
+  font-size: var(--g-text-body-1-font-size);
+  color: var(--g-color-text-complementary);
 }
 .pc-hubspot-form .hs-error-msgs {
   width: 100%;
@@ -255,10 +255,10 @@ unpredictable css rules order in build */
   order: 4;
 }
 .pc-hubspot-form .hs-error-msg {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
-  font-weight: var(--yc-text-body-font-weight);
-  color: var(--yc-color-text-danger);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+  color: var(--g-color-text-danger);
   display: block;
 }
 .pc-hubspot-form .actions {
@@ -268,7 +268,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
-  font-family: var(--yc-text-body-font-family);
+  font-family: var(--g-font-family-sans);
   font-size: inherit;
   font-weight: 400;
   color: inherit;
@@ -282,11 +282,11 @@ unpredictable css rules order in build */
   box-sizing: border-box;
   height: 44px;
   padding: 0 20px;
-  border-radius: var(--yc-border-radius-xl);
-  background-color: var(--yc-color-base-special);
-  color: var(--yc-my-color-brand-text-contrast);
+  border-radius: var(--g-border-radius-xl);
+  background-color: var(--g-color-base-brand);
+  color: var(--g-color-text-brand-contrast);
   line-height: 44px;
-  font-size: var(--yc-text-body-2-font-size);
+  font-size: var(--g-text-body-2-font-size);
   font-weight: normal;
   user-select: none;
   text-align: center;
@@ -294,16 +294,16 @@ unpredictable css rules order in build */
   appearance: none;
 }
 .pc-hubspot-form .hs-button.primary:hover {
-  background-color: var(--yc-color-base-special-hover);
+  background-color: var(--g-color-base-brand-hover);
 }
 .pc-hubspot-form .grecaptcha-badge {
   box-shadow: none !important;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-hubspot-form .hs_recaptcha div {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  font-weight: var(--yc-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
 }
 .pc-hubspot-form_mobile .hs-richtext,
 .pc-hubspot-form_mobile .hs-form-field,

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const mobileContext_1 = require("../../context/mobileContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const hooks_1 = require("../../hooks");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const models_1 = require("../../models");
@@ -15,8 +15,8 @@ const HubspotForm = (0, react_1.forwardRef)((props, ref) => {
     // hubspotEvents, // TODO: decide how to handle them
     analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const themeValue = (0, theme_1.useTheme)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.HubspotFormSubmit);
-    const { themeValue } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const isMobileValue = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const theme = themeProp !== null && themeProp !== void 0 ? themeProp : themeValue;
     const mobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileValue;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.css

@@ -6,7 +6,7 @@ unpredictable css rules order in build */
   border-radius: var(--pc-border-radius);
 }
 .pc-layout-item__media_border {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-layout-item__meta-info {
   margin: 16px 0 -8px 0;

package/build/cjs/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.css

@@ -13,7 +13,7 @@ unpredictable css rules order in build */
   width: 100%;
 }
 .pc-combined-price-detailed-block__row:not(:last-child) {
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
   margin-bottom: 12px !important;
   padding-bottom: 12px;
 }
@@ -22,7 +22,7 @@ unpredictable css rules order in build */
     padding-top: 12px;
   }
   .pc-combined-price-detailed-block__description_delimiter > * {
-    border-top: 1px solid var(--yc-color-line-generic);
+    border-top: 1px solid var(--g-color-line-generic);
   }
   .pc-combined-price-detailed-block__empty-column {
     border-top: 0;

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css

@@ -3,26 +3,26 @@ unpredictable css rules order in build */
 .pc-price-description {
   margin-bottom: 12px;
 }
-.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l, .pc-price-description__label_size_l {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l {
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
 }
-.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m, .pc-price-description__label_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
-.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s, .pc-price-description__label_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 .pc-price-description__main-title {
   font-weight: 500;
 }
 .pc-price-description__main-title_color_cornflower {
-  color: var(--yc-my-color-brand-normal);
+  color: var(--g-color-base-brand);
 }
 .pc-price-description__main-title_color_black {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-price-description__title {
   display: flex;
@@ -35,25 +35,13 @@ unpredictable css rules order in build */
 .pc-price-description__detailed-title {
   margin-left: 4px;
 }
-.pc-price-description__label {
-  padding: 4px 12px;
-  border-radius: 4px;
-  width: fit-content;
+.pc-price-description__label_size_s {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
-.pc-price-description__label_color_blue {
-  background: var(--yc-color-promo-highlight-sky);
-}
-.pc-price-description__label_color_green {
-  background: var(--yc-color-promo-highlight-mint);
-}
-.pc-price-description__label_color_yellow {
-  background: var(--yc-color-promo-highlight-gold);
-}
-.pc-price-description__label_color_purple {
-  background: var(--yc-color-promo-highlight-neon);
-}
-.pc-price-description__label_color_red {
-  background: var(--yc-color-promo-highlight-tomato);
+.pc-price-description__label_size_xs {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 @media (max-width: 577px) {
   .pc-price-description {

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.js

@@ -2,10 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../../components");
 const stylesContext_1 = require("../../../context/stylesContext");
+const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('price-description');
+const LabelColorsMapping = {
+    [models_1.PriceLabelColor.BLUE]: 'info',
+    [models_1.PriceLabelColor.GREEN]: 'success',
+    [models_1.PriceLabelColor.YELLOW]: 'warning',
+    [models_1.PriceLabelColor.PURPLE]: 'normal',
+    [models_1.PriceLabelColor.RED]: 'dnager',
+};
+const LabelSizeMap = {
+    l: 's',
+    m: 's',
+    s: 'xs',
+    xs: 'xs',
+};
 const PriceDescription = (props) => {
     const { title, detailedTitle = '', description, titleSize = 'l', descriptionSize = 'm', colorTitle = 'cornflower', label, labelsDefaultText, className, } = props;
     const descriptionRef = react_1.default.useRef(null);
@@ -38,7 +53,9 @@ const PriceDescription = (props) => {
             return null;
         }
         const labelTitle = label.text || (labelsDefaultText && labelsDefaultText[label.color]);
-        return (react_1.default.createElement("div", { className: b('label', { color: label.color, size: label.size || descriptionSize }) }, labelTitle));
+        const labelColor = (LabelColorsMapping[label.color] || 'unknown');
+        const labelSize = LabelSizeMap[label.size || descriptionSize];
+        return (react_1.default.createElement(uikit_1.Label, { className: b('label', { size: labelSize }), theme: labelColor, size: labelSize }, labelTitle));
     }, [descriptionSize, label, labelsDefaultText]);
     const titleElement = (0, react_1.useMemo)(() => {
         return (react_1.default.createElement("div", { className: b('title', { size: titleSize }) },

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/Settings.css

@@ -4,17 +4,17 @@ unpredictable css rules order in build */
   font-weight: 400;
 }
 .pc-settings-list__title_size_l, .pc-settings-list__description_size_l {
-  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);
 }
 .pc-settings-list__title_size_m, .pc-settings-list__description_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-settings-list__title_size_s, .pc-settings-list__description_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);
 }
 .pc-settings-list__title {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -17,7 +17,7 @@ unpredictable css rules order in build */
   }
 }
 .pc-price-details__delimiter-line {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .pc-price-details__arrow {
   margin: auto 10px;
@@ -26,14 +26,14 @@ unpredictable css rules order in build */
   cursor: pointer;
   display: flex;
   font-weight: 400;
-  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-price-details__foldable_title_color_cornflower {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-price-details__foldable_title_color_black {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-price-details__foldable_block > * {
   padding-top: 12px;

package/build/cjs/sub-blocks/Quote/Quote.css

@@ -10,14 +10,14 @@ unpredictable css rules order in build */
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
   display: flex;
   min-height: 400px;
   height: 100%;
 }
 .pc-quote_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote_theme_dark h1,
 .pc-quote_theme_dark h2,
@@ -26,10 +26,10 @@ unpredictable css rules order in build */
 .pc-quote_theme_dark h5,
 .pc-quote_theme_dark h6,
 .pc-quote_theme_dark .yfm {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-quote_border_line, .pc-quote_border_none {
   cursor: default;
@@ -60,8 +60,8 @@ unpredictable css rules order in build */
 .pc-quote__content {
   margin-top: 24px;
   position: relative;
-  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-quote__content::before {
   position: absolute;
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
   margin-top: 20px;
 }
 .pc-quote__author_theme_dark, .pc-quote_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote__author_theme_dark h1,
 .pc-quote__author_theme_dark h2,
@@ -99,7 +99,7 @@ unpredictable css rules order in build */
 .pc-quote_theme_dark h5,
 .pc-quote_theme_dark h6,
 .pc-quote_theme_dark .yfm {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote__author {
   max-width: calc(60% - 20px);
@@ -110,10 +110,10 @@ unpredictable css rules order in build */
   /* stylelint-enable declaration-no-important */
 }
 .pc-quote__link-button_theme_dark {
-  color: var(--yc-color-base-background) !important;
+  color: var(--g-color-base-background) !important;
 }
 .pc-quote__link-button_theme_dark:before {
-  border-color: var(--yc-color-base-background) !important;
+  border-color: var(--g-color-base-background) !important;
 }
 @media (max-width: 1081px) {
   .pc-quote__author-wrapper {

package/build/cjs/sub-blocks/Quote/Quote.js

@@ -5,14 +5,14 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../components/Media/Image/utils");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const hooks_1 = require("../../hooks");
 const models_1 = require("../../models");
 const utils_2 = require("../../utils");
 const b = (0, utils_2.block)('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const imageThemed = (0, utils_2.getThemedValue)(image, theme);
     const imageData = (0, utils_1.getMediaImage)(imageThemed);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.QuoteButton, url);

package/build/cjs/utils/theme.d.ts

@@ -4,4 +4,4 @@ export interface ThemedValue<T> extends Partial<Record<string, T>> {
 }
 export type ThemeSupporting<T> = T | ThemedValue<T>;
 export declare function isThemedValue<T>(value: ThemeSupporting<T>): value is ThemedValue<T>;
-export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: string): T;
+export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: import("..").Theme): T;

package/build/esm/blocks/Companies/Companies.css

@@ -8,15 +8,15 @@ unpredictable css rules order in build */
   text-align: center;
 }
 .pc-companies-block__title {
-  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);
 }
 @media (max-width: 576px) {
   .pc-companies-block__title {
-    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-companies-block__images {

package/build/esm/blocks/Companies/Companies.js

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Image } from '../../components';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import './Companies.css';
 const b = block('companies-block');
 export const CompaniesBlock = ({ title, images, animated }) => {
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const themedImages = getThemedValue(images, theme) || {};
     return (React.createElement(AnimateBlock, { className: b(), offset: 150, animate: animated },
         React.createElement("div", { className: b('content') },

package/build/esm/blocks/ContentLayout/ContentLayout.css

@@ -15,12 +15,12 @@ unpredictable css rules order in build */
   margin-top: 24px;
 }
 .pc-content-layout-block__files_size_s {
-  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-content-layout-block__files_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-content-layout-block__files_centered {
   margin-left: auto;

package/build/esm/blocks/ContentLayout/ContentLayout.js

@@ -28,9 +28,7 @@ function getTextWidth(size) {
 }
 export const ContentLayoutBlock = (props) => {
     const isMobile = useContext(MobileContext);
-    const { textContent, fileContent } = props;
-    const propsSource = props.properties || props;
-    const { size = 'l', background, centered, theme = 'default', textWidth = 'm' } = propsSource;
+    const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = useMemo(() => getTextWidth(textWidth), [textWidth]);
     return (React.createElement("div", { className: b({ size, background: Boolean(background) }) },
         React.createElement(Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -17,17 +17,17 @@ unpredictable css rules order in build */
   padding-right: 32px;
 }
 .pc-ExtendedFeaturesBlock__item-title {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   display: block;
   position: relative;
   margin-bottom: 8px;
 }
 .pc-ExtendedFeaturesBlock__item-title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -35,28 +35,28 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-ExtendedFeaturesBlock__item-title a:hover, .pc-ExtendedFeaturesBlock__item-title 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-ExtendedFeaturesBlock__item-label {
-  font-size: var(--yc-text-caption-2-font-size);
-  line-height: var(--yc-text-caption-2-line-height);
+  font-size: var(--g-text-caption-2-font-size);
+  line-height: var(--g-text-caption-2-line-height);
   position: relative;
   top: -3px;
   height: 16px;
   margin-left: 8px;
   padding: 1.5px 5px 2px;
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-my-color-brand-normal);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
   border-radius: 4px;
 }
 .pc-ExtendedFeaturesBlock__item-text, .pc-ExtendedFeaturesBlock__item-link {
-  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-ExtendedFeaturesBlock__item-text a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -64,12 +64,12 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-ExtendedFeaturesBlock__item-text a:hover, .pc-ExtendedFeaturesBlock__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-ExtendedFeaturesBlock__item-link {
   margin-top: 8px;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-ExtendedFeaturesBlock__icon {
   width: 32px;