@gravity-ui/page-constructor 3.16.0 → 4.0.0

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

@@ -8,11 +8,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);
 }
 .pc-navigation-popup__list {
   margin: 0;
@@ -26,6 +26,6 @@ unpredictable css rules order in build */
   border-radius: 8px;
 }
 .pc-navigation-popup__link:hover {
-  color: var(--yc-color-text-primary);
-  background-color: var(--yc-color-base-simple-hover);
+  color: var(--g-color-text-primary);
+  background-color: var(--g-color-base-simple-hover);
 }

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

@@ -10,6 +10,6 @@ export const NavigationPopup = ({ anchorRef, items, onClose, className, open, })
 // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
 , { 
     // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-    anchorRef: open ? anchorRef : undefined, className: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET },
+    anchorRef: open ? anchorRef : undefined, contentClassName: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET },
     React.createElement("ul", { className: b('list') }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item, menuLayout: NavigationLayout.Dropdown }))))));
 export default NavigationPopup;

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

@@ -7,12 +7,12 @@ unpredictable css rules order in build */
   width: 40px;
   height: 40px;
   margin-right: 8px;
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
   border-radius: 50%;
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 .pc-social-icon:hover {
-  background-color: var(--yc-color-base-generic-hover);
+  background-color: var(--g-color-base-generic-hover);
 }
 .pc-social-icon__icon {
   width: 16px;

package/build/esm/sub-blocks/BackgroundCard/BackgroundCard.css

@@ -4,10 +4,10 @@ unpredictable css rules order in build */
   position: relative;
 }
 .pc-background-card_theme_light {
-  background-color: var(--yc-color-promo-base-silver);
+  background-color: var(--pc-color-base-silver);
 }
 .pc-background-card_theme_dark {
-  background-color: var(--yc-color-promo-base-asphalt);
+  background-color: var(--pc-color-base-asphalt);
 }
 .pc-background-card_padding_s {
   padding-bottom: 80px;
@@ -39,8 +39,8 @@ unpredictable css rules order in build */
 }
 
 a.pc-background-card_theme_light {
-  background-color: var(--yc-color-promo-base-silver);
+  background-color: var(--pc-color-base-silver);
 }
 a.pc-background-card_theme_dark {
-  background-color: var(--yc-color-promo-base-asphalt);
+  background-color: var(--pc-color-base-asphalt);
 }

package/build/esm/sub-blocks/BackgroundCard/BackgroundCard.js

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { BackgroundImage, CardBase } from '../../components/';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import Content from '../Content/Content';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
     const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const link = hasBackgroundColor || border === 'line' ? undefined : url;
     const borderType = hasBackgroundColor ? 'none' : border;

package/build/esm/sub-blocks/BannerCard/BannerCard.css

@@ -6,28 +6,28 @@
 unpredictable css rules order in build */
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title p,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle p {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 
 .pc-banner-card__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-banner-card__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-banner-card__title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -35,8 +35,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-banner-card__title a:hover, .pc-banner-card__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-banner-card__content {
   width: 100%;
@@ -57,17 +57,17 @@ unpredictable css rules order in build */
 .pc-banner-card__subtitle {
   display: inline-block;
   margin-top: 8px;
-  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);
   font-weight: normal;
 }
 .pc-banner-card__subtitle p {
-  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);
   font-weight: normal;
 }
 .pc-banner-card__button.pc-banner-card__button {

package/build/esm/sub-blocks/BannerCard/BannerCard.js

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { BackgroundImage, Button, HTML, RouterLink, YFMWrapper } from '../../components';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
     const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const contentStyle = {};
     if (color) {
         contentStyle.backgroundColor = getThemedValue(color, theme);

package/build/esm/sub-blocks/Content/Content.css

@@ -8,7 +8,7 @@ unpredictable css rules order in build */
 .pc-content {
   --pc-monochrome-button-background-color: #262626;
   --pc-monochrome-button-background-color-hover: #393939;
-  --pc-monochrome-button-color: var(--yc-color-text-light-primary);
+  --pc-monochrome-button-color: var(--g-color-text-light-primary);
 }
 .pc-content__notice .yfm ol,
 .pc-content__notice .yfm ul, .pc-content__text .yfm ol,
@@ -17,14 +17,14 @@ unpredictable css rules order in build */
 }
 .pc-content__notice.pc-content__notice .yfm,
 .pc-content__notice.pc-content__notice .yfm > * {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-content__notice.pc-content__notice .yfm a {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   text-decoration: underline;
 }
 .pc-content__notice.pc-content__notice .yfm a:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 
 .pc-content__button.pc-content__button {
@@ -82,8 +82,8 @@ unpredictable css rules order in build */
 }
 .pc-content_size_l .pc-content__text .yfm,
 .pc-content_size_l .pc-content__notice .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-content_size_l .pc-content__links,
 .pc-content_size_l .pc-content__link,
@@ -95,63 +95,63 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,
 .pc-content_theme_dark .pc-content__link a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-content_theme_dark .pc-content__notice .yfm,
 .pc-content_theme_dark .pc-content__notice .yfm * {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__notice .yfm a {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
   text-decoration: underline;
 }
 .pc-content_theme_dark .pc-content__notice .yfm a:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-content_theme_dark .pc-content__text .yfm a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
   text-decoration: underline;
 }
 .pc-content_theme_dark .pc-content__text .yfm a:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__title a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
   text-decoration: underline;
   text-decoration: none;
 }
 .pc-content_theme_dark .pc-content__title a:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_light .pc-content__title *,
 .pc-content_theme_light .pc-content__text .yfm,
 .pc-content_theme_light .pc-content__text .yfm *,
 .pc-content_theme_light .pc-content__link a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
 }
 .pc-content_theme_light .pc-content__notice .yfm,
 .pc-content_theme_light .pc-content__notice .yfm * {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__notice .yfm a {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
   text-decoration: underline;
 }
 .pc-content_theme_light .pc-content__notice .yfm a:hover {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
 }
 .pc-content_theme_light .pc-content__text .yfm a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
   text-decoration: underline;
 }
 .pc-content_theme_light .pc-content__text .yfm a:hover {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__title a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
   text-decoration: underline;
   text-decoration: none;
 }
 .pc-content_theme_light .pc-content__title a:hover {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }

package/build/esm/sub-blocks/Content/ContentList/ContentList.css

@@ -4,8 +4,8 @@ unpredictable css rules order in build */
   margin-top: 24px;
 }
 .pc-content-list_size_l .pc-content-list__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);
   margin: 0 0 8px;
 }
 .pc-content-list_size_l .pc-content-list__icon {
@@ -22,8 +22,8 @@ unpredictable css rules order in build */
   margin-top: 16px;
 }
 .pc-content-list_size_s .pc-content-list__title {
-  font-size: var(--yc-text-subheader-3-font-size);
-  line-height: var(--yc-text-subheader-3-line-height);
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
   margin: 0 0 calc(8px / 2);
 }
 .pc-content-list_size_s .pc-content-list__icon {
@@ -34,8 +34,8 @@ unpredictable css rules order in build */
   margin-right: 8px;
 }
 .pc-content-list_size_s .pc-content-list__text {
-  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-content-list_size_s .pc-content-list__item:not(:last-child) {
   margin-bottom: 12px;

package/build/esm/sub-blocks/Content/ContentList/ContentList.js

@@ -1,14 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { YFMWrapper } from '../../../components';
 import Image from '../../../components/Image/Image';
 import { getMediaImage } from '../../../components/Media/Image/utils';
-import { ThemeValueContext } from '../../../context/theme/ThemeValueContext';
+import { useTheme } from '../../../context/theme';
 import { block, getThemedValue } from '../../../utils';
 import './ContentList.css';
 const b = block('content-list');
 const ContentList = ({ list, size }) => {
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     return (React.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
         const iconThemed = getThemedValue(icon, theme);

package/build/esm/sub-blocks/Divider/Divider.css

@@ -23,5 +23,5 @@
   padding-top: 128px;
 }
 .pc-divider-block_border {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }

package/build/esm/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/esm/sub-blocks/HubspotForm/index.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext, useMemo } from 'react';
 import { MobileContext } from '../../context/mobileContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { useAnalytics, useHandleHubspotEvents } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
 import { DefaultEventNames } from '../../models';
@@ -13,8 +13,8 @@ const HubspotForm = forwardRef((props, ref) => {
     // hubspotEvents, // TODO: decide how to handle them
     analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = useMetrika();
+    const themeValue = useTheme();
     const handleAnalytics = useAnalytics(DefaultEventNames.HubspotFormSubmit);
-    const { themeValue } = useContext(ThemeValueContext);
     const isMobileValue = useContext(MobileContext);
     const theme = themeProp !== null && themeProp !== void 0 ? themeProp : themeValue;
     const mobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileValue;

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