@gravity-ui/page-constructor 4.28.0-alpha.0 → 4.28.0

package/build/esm/components/Control/Control.css

@@ -4,6 +4,7 @@ unpredictable css rules order in build */
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: var(--g-focus-border-radius);
   transition: color 0.2s;
   display: inline-block;
   margin: 0;
@@ -25,6 +26,13 @@ unpredictable css rules order in build */
 .utilityfocus .pc-control:focus {
   outline: 2px solid #ffdb4d;
 }
+.pc-control:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-control:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-control_size_xs {
   width: 24px;
   height: 24px;

package/build/esm/components/FileLink/FileLink.css

@@ -19,6 +19,14 @@ unpredictable css rules order in build */
 }
 .pc-file-link__link > a {
   color: var(--g-color-text-primary);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-file-link__link > a:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-file-link__link > a:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-file-link__link > a:hover {
   color: var(--g-color-text-secondary);

package/build/esm/components/FullscreenImage/FullscreenImage.css

@@ -6,6 +6,9 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__image-wrapper {
   position: relative;
 }
+.pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__icon-wrapper {
+  opacity: 1;
+}
 .pc-fullscreen-image__modal-content {
   position: relative;
 }
@@ -19,6 +22,15 @@ unpredictable css rules order in build */
   border-radius: var(--pc-border-radius);
 }
 .pc-fullscreen-image__icon-wrapper {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,7 +45,14 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: 0.3s;
 }
-.pc-fullscreen-image__icon-wrapper_visible {
+.pc-fullscreen-image__icon-wrapper:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-fullscreen-image__icon-wrapper:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-fullscreen-image__icon-wrapper:focus {
   opacity: 1;
 }
 .pc-fullscreen-image__icon {

package/build/esm/components/FullscreenImage/FullscreenImage.js

@@ -11,19 +11,16 @@ const CLOSE_ICON_SIZE = 30;
 const FullscreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt') } = props;
     const [isOpened, setIsOpened] = useState(false);
-    const [isMouseEnter, setIsMouseEnter] = useState(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    const showFullscreenIcon = () => setIsMouseEnter(true);
-    const hideFullscreenIcon = () => setIsMouseEnter(false);
     return (React.createElement("div", { className: b() },
-        React.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullscreenIcon, onMouseLeave: hideFullscreenIcon },
+        React.createElement("div", { className: b('image-wrapper') },
             React.createElement(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
-            React.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
+            React.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
                 React.createElement(Icon, { data: Fullscreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             React.createElement("div", { className: b('modal-content') },
-                React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
+                React.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
                     React.createElement(Icon, { data: PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 React.createElement(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };

package/build/esm/components/FullscreenMedia/FullscreenMedia.css

@@ -50,6 +50,10 @@ unpredictable css rules order in build */
   transition: opacity 0.3s;
   pointer-events: none;
 }
+.pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper_visible, .pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper:focus, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper_visible, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper:focus {
+  opacity: 1;
+  pointer-events: inherit;
+}
 .pc-full-screen-media__modal-content:hover .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper:hover .pc-full-screen-media__icon-wrapper {
   opacity: 1;
   pointer-events: inherit;

package/build/esm/components/FullscreenMedia/FullscreenMedia.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MediaAllProps } from '../Media/Media';
 import './FullscreenMedia.css';
-export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className' | 'previewImg' | 'autoplay'>;
 export interface FullscreenMediaProps {
     showFullscreenIcon?: boolean;
     children: (props?: ChildMediaRenderProps) => JSX.Element;

package/build/esm/components/FullscreenMedia/FullscreenMedia.js

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { Icon, Modal } from '@gravity-ui/uikit';
+import { Button, Icon, Modal } from '@gravity-ui/uikit';
 import { MobileContext } from '../../context/mobileContext';
 import { Fullscreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
@@ -22,17 +22,19 @@ const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullscreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            showFullscreenIcon && (React.createElement(Button, { className: b('icon-wrapper'), extraProps: { onClickCapture: openModal }, size: 'l' },
                 React.createElement(Icon, { data: Fullscreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             React.createElement("div", { className: b('modal-content') },
-                React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                React.createElement(Button, { className: b('icon-wrapper', { visible: true }), onClick: closeModal, size: 'l' },
                     React.createElement(Icon, { data: PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 children({
                     imageClassName: getMediaClass('image'),
                     videoClassName: getMediaClass('video'),
                     youtubeClassName: getMediaClass('youtube'),
                     fullscreen: true,
+                    previewImg: undefined,
+                    autoplay: true,
                 }))))));
 };
 export default FullscreenMedia;

package/build/esm/components/Link/Link.css

@@ -10,6 +10,7 @@ unpredictable css rules order in build */
   cursor: pointer;
   display: flex;
   align-items: center;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .pc-link-block__link:focus {
   outline: 2px solid #ffdb4d;
@@ -18,6 +19,13 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-link-block__link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-link-block__link:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-link-block__link_theme_dark {
   color: var(--g-color-text-light-primary);
 }

package/build/esm/components/Media/Image/Image.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { animated, config, useSpring } from 'react-spring';
 import SliderBlock from '../../../blocks/Slider/Slider';
@@ -50,7 +50,7 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item, index) => (React.createElement(Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

package/build/esm/components/Media/Media.d.ts

@@ -5,6 +5,7 @@ import './Media.css';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
+    autoplay?: boolean;
 }
 export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

package/build/esm/components/Media/Media.js

@@ -8,7 +8,7 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
@@ -40,7 +40,7 @@ export const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -68,6 +68,7 @@ export const Media = (props) => {
         customBarControlsClassName,
         ratio,
         youtubeClassName,
+        autoplay,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -1,3 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
 .pc-overflow-scroller {
   display: flex;
   align-items: center;
@@ -19,6 +21,15 @@
   transition: left 0.6s;
 }
 .pc-overflow-scroller__arrow {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   position: absolute;
   z-index: 10;
   top: 0;
@@ -29,6 +40,14 @@
   height: calc(100% - 1px);
   cursor: pointer;
   color: var(--g-color-text-secondary);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-overflow-scroller__arrow:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-overflow-scroller__arrow:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-overflow-scroller__arrow_type_left {
   left: 0;

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -2,6 +2,7 @@ import React, { createRef } from 'react';
 import debounce from 'lodash/debounce';
 import { ToggleArrow } from '..';
 import { block } from '../../utils';
+import i18n from './i18n';
 import './OverflowScroller.css';
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;
@@ -82,7 +83,7 @@ export default class OverflowScroller extends React.Component {
             }) },
             React.createElement("div", { className: b(null, className), ref: this.containerRef },
                 React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
+            arrows.map((direction) => (React.createElement("button", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction), "aria-label": i18n(direction) },
                 React.createElement(ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

package/build/esm/components/OverflowScroller/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "left": "Previous",
+  "right": "Next"
+}

package/build/esm/components/OverflowScroller/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/OverflowScroller/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'OverflowScroller';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/OverflowScroller/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "left": "Предыдущий",
+  "right": "Следующий"
+}

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

@@ -56,10 +56,11 @@ unpredictable css rules order in build */
   background: #eff2f8;
 }
 .pc-CustomBarControls__button_type_with-mute-button:focus {
-  outline: 2px solid var(--g-color-line-misc);
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
 }
 .pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
-  outline: none;
+  outline: 0;
 }
 .pc-CustomBarControls__button_type_with-play-pause-button {
   width: 42px;
@@ -68,10 +69,11 @@ unpredictable css rules order in build */
   background: var(--g-color-base-background);
 }
 .pc-CustomBarControls__button_type_with-play-pause-button:focus {
-  outline: 2px solid var(--g-color-line-misc);
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
 }
 .pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
-  outline: none;
+  outline: 0;
 }
 .pc-CustomBarControls__play-icon_type_with-play-pause-button {
   height: 16px;

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -27,6 +27,13 @@ unpredictable css rules order in build */
   height: 64px;
   border-radius: 166px;
 }
+.pc-ReactPlayer__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-ReactPlayer__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-ReactPlayer__button_theme_blue {
   color: var(--g-color-base-background);
   background-color: var(--g-color-base-brand);

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -216,12 +216,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
         React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
                 ? undefined
-                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, config: {
+                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                 file: {
                     attributes: {
-                        pip: props.autoplay ? 'false' : undefined,
-                        playsinline: props.autoplay ? '' : undefined,
-                        disablepictureinpicture: props.autoplay ? '' : undefined,
+                        pip: isMobile ? 'false' : undefined,
+                        playsinline: isMobile ? '' : undefined,
+                        disablepictureinpicture: isMobile ? '' : undefined,
                     },
                 },
             } }),

package/build/esm/components/Table/Table.css

@@ -13,7 +13,7 @@ unpredictable css rules order in build */
   display: flex;
 }
 .pc-table__row:first-child {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-table__row:first-child .pc-table__cell {
   border-bottom-color: var(--g-color-line-generic-active);

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

@@ -62,11 +62,19 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
   padding-right: 8px;
+  border-radius: var(--g-focus-border-radius);
 }
 .pc-title-item__link:hover, .pc-title-item__link:active {
   --pc-text-header-color: inherit;
   color: inherit;
 }
+.pc-title-item__link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-title-item__link:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-title-item__link:hover {
   cursor: pointer;
 }

package/build/esm/components/VideoBlock/VideoBlock.css

@@ -43,6 +43,13 @@ unpredictable css rules order in build */
   background-color: var(--g-color-base-brand);
   border-radius: 50%;
 }
+.pc-VideoBlock__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-VideoBlock__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-VideoBlock__icon {
   margin-left: 6px;
 }

package/build/esm/components/VideoBlock/VideoBlock.d.ts

@@ -16,6 +16,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     playButton?: React.ReactNode;
     height?: number;
     fullscreen?: boolean;
+    autoplay?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -37,7 +37,7 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = useRef(null);
@@ -71,7 +71,7 @@ const VideoBlock = (props) => {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             if (!previewImg) {
-                iframe.src = `${src}?${getPageSearchParams(attributes || {})}`;
+                iframe.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, (attributes || {})), (autoplay ? AUTOPLAY_ATTRIBUTES : {})))}`;
             }
             iframe.width = '100%';
             iframe.height = '100%';
@@ -83,7 +83,7 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]);
     useEffect(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -35,18 +35,22 @@ unpredictable css rules order in build */
   --pc-selected-tab-item-background-color-hover: var(
       --pc-monochrome-button-background-color-hover
   );
+  --pc-color-line-focus-light: var(--g-color-text-brand);
+  --pc-color-line-focus-dark: var(--g-color-text-light-primary);
 }
 .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-color-line-focus: var(--pc-color-line-focus-light);
 }
 .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-color-line-focus: var(--pc-color-line-focus-dark);
 }
 .g-root.g-root_theme_dark {
   --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
@@ -95,7 +99,7 @@ unpredictable css rules order in build */
   margin: 0 0 12px;
 }
 .yfm_constructor.yfm_constructor p strong {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .yfm_constructor.yfm_constructor_size_s ul,
 .yfm_constructor.yfm_constructor_size_s ol,
@@ -124,6 +128,7 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -132,6 +137,12 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.yfm_constructor a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.yfm_constructor a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

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

@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
+    mediaView?: 'fit' | 'full';
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: 's' | 'm' | 'l' | 'xl';

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

@@ -4,6 +4,9 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-banner-card_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .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(--g-color-text-light-primary);

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

@@ -91,6 +91,9 @@ unpredictable css rules order in build */
 .pc-content_size_l .pc-content__button {
   margin-top: 12px;
 }
+.pc-content_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,

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

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-hubspot-form {
+  --g-color-line-focus: var(--pc-color-line-focus-light);
+}
 .pc-hubspot-form .submitted-message {
   padding-left: 10px;
 }
@@ -10,6 +13,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field > label {
   color: var(--g-color-text-primary);
   font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   width: 200px;
   max-width: 100%;
@@ -77,7 +81,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(--g-color-base-brand);
+  border: 2px solid var(--g-color-line-focus);
   outline: none;
 }
 .pc-hubspot-form .hs-form-field .input textarea {
@@ -97,7 +101,7 @@ unpredictable css rules order in build */
   padding-right: 30px;
 }
 .pc-hubspot-form .hs-form-field .input select:focus {
-  border: 1px solid var(--g-color-line-generic-active);
+  border: 1px solid var(--g-color-line-focus);
 }
 .pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input {
   float: none;
@@ -139,7 +143,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:not(.hs-form-required) {
   color: var(--g-color-text-primary);
   font-size: var(--g-text-body-2-font-size);
-  line-height: 16px;
+  line-height: var(--g-text-body-2-line-height);
   padding-left: 7px;
   margin: 0;
   flex-grow: 1;
@@ -187,6 +191,10 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-checkbox-display input:checked ~ span:before {
   background-color: #ffeba0;
 }
+.pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display input[type=checkbox]:focus ~ span::before,
+.pc-hubspot-form .hs-form-field .hs-form-checkbox-display input[type=checkbox]:focus ~ span::before {
+  outline: 2px solid var(--g-color-line-focus);
+}
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:before {
   content: "";
   position: absolute;
@@ -229,7 +237,17 @@ unpredictable css rules order in build */
   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;
+  margin: 20px 0;
+}
+.pc-hubspot-form .hs-richtext a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.pc-hubspot-form .hs-richtext a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.pc-hubspot-form .hs-richtext a:focus {
+  outline: 0;
+  border-radius: var(--g-focus-border-radius);
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
@@ -238,6 +256,9 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
 }
+.pc-hubspot-form .legal-consent-container {
+  padding-top: 8px;
+}
 .pc-hubspot-form .inputs-list {
   list-style: none;
   padding: 0;
@@ -301,9 +322,23 @@ unpredictable css rules order in build */
   white-space: nowrap;
   appearance: none;
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .hs-button.primary:hover {
   background-color: var(--g-color-base-brand-hover);
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .grecaptcha-badge {
   box-shadow: none !important;
   border: 1px solid var(--g-color-line-generic);
@@ -355,6 +390,9 @@ unpredictable css rules order in build */
 .pc-hubspot-form_mobile .hs-button.primary {
   width: 80%;
 }
+.pc-hubspot-form_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-hubspot-form_theme_dark .hs-form-field .input select {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTEgNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMTAuMDggMEw1LjUgNC4zNi45MSAwIDAgLjg2bDUuNSA1LjI1TDExIC44NnoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==");
 }