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

package/build/esm/blocks/Header/schema.d.ts

@@ -111,7 +111,27 @@ export declare const HeaderBackgroundProps: {
                 };
                 controls: {
                     type: string;
-                    enum: string[];
+                    enum: import("../..").MediaVideoControlsType[];
+                };
+                customControlsOptions: {
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {
+                        type: {
+                            type: string;
+                            enum: import("../..").CustomControlsType[];
+                        };
+                        muteButtonShown: {
+                            type: string;
+                        };
+                        positioning: {
+                            type: string;
+                            enum: import("../..").CustomControlsButtonPositioning[];
+                        };
+                    };
+                };
+                ariaLabel: {
+                    type: string;
                 };
             };
         };
@@ -351,7 +371,27 @@ export declare const HeaderProperties: {
                 };
                 controls: {
                     type: string;
-                    enum: string[];
+                    enum: import("../..").MediaVideoControlsType[];
+                };
+                customControlsOptions: {
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {
+                        type: {
+                            type: string;
+                            enum: import("../..").CustomControlsType[];
+                        };
+                        muteButtonShown: {
+                            type: string;
+                        };
+                        positioning: {
+                            type: string;
+                            enum: import("../..").CustomControlsButtonPositioning[];
+                        };
+                    };
+                };
+                ariaLabel: {
+                    type: string;
                 };
             };
         } & {
@@ -499,7 +539,27 @@ export declare const HeaderProperties: {
                         };
                         controls: {
                             type: string;
-                            enum: string[];
+                            enum: import("../..").MediaVideoControlsType[];
+                        };
+                        customControlsOptions: {
+                            type: string;
+                            additionalProperties: boolean;
+                            properties: {
+                                type: {
+                                    type: string;
+                                    enum: import("../..").CustomControlsType[];
+                                };
+                                muteButtonShown: {
+                                    type: string;
+                                };
+                                positioning: {
+                                    type: string;
+                                    enum: import("../..").CustomControlsButtonPositioning[];
+                                };
+                            };
+                        };
+                        ariaLabel: {
+                            type: string;
                         };
                     };
                 };
@@ -788,7 +848,27 @@ export declare const HeaderBlock: {
                         };
                         controls: {
                             type: string;
-                            enum: string[];
+                            enum: import("../..").MediaVideoControlsType[];
+                        };
+                        customControlsOptions: {
+                            type: string;
+                            additionalProperties: boolean;
+                            properties: {
+                                type: {
+                                    type: string;
+                                    enum: import("../..").CustomControlsType[];
+                                };
+                                muteButtonShown: {
+                                    type: string;
+                                };
+                                positioning: {
+                                    type: string;
+                                    enum: import("../..").CustomControlsButtonPositioning[];
+                                };
+                            };
+                        };
+                        ariaLabel: {
+                            type: string;
                         };
                     };
                 } & {
@@ -936,7 +1016,27 @@ export declare const HeaderBlock: {
                                 };
                                 controls: {
                                     type: string;
-                                    enum: string[];
+                                    enum: import("../..").MediaVideoControlsType[];
+                                };
+                                customControlsOptions: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        type: {
+                                            type: string;
+                                            enum: import("../..").CustomControlsType[];
+                                        };
+                                        muteButtonShown: {
+                                            type: string;
+                                        };
+                                        positioning: {
+                                            type: string;
+                                            enum: import("../..").CustomControlsButtonPositioning[];
+                                        };
+                                    };
+                                };
+                                ariaLabel: {
+                                    type: string;
                                 };
                             };
                         };

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -130,7 +130,27 @@ export declare const HeaderSliderBlock: {
                                     };
                                     controls: {
                                         type: string;
-                                        enum: string[];
+                                        enum: import("../..").MediaVideoControlsType[];
+                                    };
+                                    customControlsOptions: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        properties: {
+                                            type: {
+                                                type: string;
+                                                enum: import("../..").CustomControlsType[];
+                                            };
+                                            muteButtonShown: {
+                                                type: string;
+                                            };
+                                            positioning: {
+                                                type: string;
+                                                enum: import("../..").CustomControlsButtonPositioning[];
+                                            };
+                                        };
+                                    };
+                                    ariaLabel: {
+                                        type: string;
                                     };
                                 };
                             } & {
@@ -278,7 +298,27 @@ export declare const HeaderSliderBlock: {
                                             };
                                             controls: {
                                                 type: string;
-                                                enum: string[];
+                                                enum: import("../..").MediaVideoControlsType[];
+                                            };
+                                            customControlsOptions: {
+                                                type: string;
+                                                additionalProperties: boolean;
+                                                properties: {
+                                                    type: {
+                                                        type: string;
+                                                        enum: import("../..").CustomControlsType[];
+                                                    };
+                                                    muteButtonShown: {
+                                                        type: string;
+                                                    };
+                                                    positioning: {
+                                                        type: string;
+                                                        enum: import("../..").CustomControlsButtonPositioning[];
+                                                    };
+                                                };
+                                            };
+                                            ariaLabel: {
+                                                type: string;
                                             };
                                         };
                                     };

package/build/esm/blocks/Icons/Icons.css

@@ -30,16 +30,6 @@ unpredictable css rules order in build */
   text-decoration: none;
   margin: 0 8px 24px;
 }
-.pc-icons-block a.pc-icons-block__item {
-  border-radius: var(--g-focus-border-radius);
-}
-.pc-icons-block a.pc-icons-block__item:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-icons-block a.pc-icons-block__item:focus:not(:focus-visible) {
-  outline: 0;
-}
 .pc-icons-block__image {
   max-width: 100%;
   margin: 0 auto;

package/build/esm/blocks/Media/schema.d.ts

@@ -105,7 +105,27 @@ export declare const Media: {
                 };
                 controls: {
                     type: string;
-                    enum: string[];
+                    enum: import("../..").MediaVideoControlsType[];
+                };
+                customControlsOptions: {
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {
+                        type: {
+                            type: string;
+                            enum: import("../..").CustomControlsType[];
+                        };
+                        muteButtonShown: {
+                            type: string;
+                        };
+                        positioning: {
+                            type: string;
+                            enum: import("../..").CustomControlsButtonPositioning[];
+                        };
+                    };
+                };
+                ariaLabel: {
+                    type: string;
                 };
             };
         };
@@ -698,7 +718,27 @@ export declare const MediaBlock: {
                                 };
                                 controls: {
                                     type: string;
-                                    enum: string[];
+                                    enum: import("../..").MediaVideoControlsType[];
+                                };
+                                customControlsOptions: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        type: {
+                                            type: string;
+                                            enum: import("../..").CustomControlsType[];
+                                        };
+                                        muteButtonShown: {
+                                            type: string;
+                                        };
+                                        positioning: {
+                                            type: string;
+                                            enum: import("../..").CustomControlsButtonPositioning[];
+                                        };
+                                    };
+                                };
+                                ariaLabel: {
+                                    type: string;
                                 };
                             };
                         };

package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts

@@ -121,7 +121,27 @@ export declare const PromoFeaturesItem: {
                         };
                         controls: {
                             type: string;
-                            enum: string[];
+                            enum: import("../..").MediaVideoControlsType[];
+                        };
+                        customControlsOptions: {
+                            type: string;
+                            additionalProperties: boolean;
+                            properties: {
+                                type: {
+                                    type: string;
+                                    enum: import("../..").CustomControlsType[];
+                                };
+                                muteButtonShown: {
+                                    type: string;
+                                };
+                                positioning: {
+                                    type: string;
+                                    enum: import("../..").CustomControlsButtonPositioning[];
+                                };
+                            };
+                        };
+                        ariaLabel: {
+                            type: string;
                         };
                     };
                 };

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -19,14 +19,6 @@ unpredictable css rules order in build */
   position: relative;
   padding-right: 24px;
   cursor: pointer;
-  border-radius: var(--g-focus-border-radius);
-}
-.pc-QuestionsBlockItem__title:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
-  outline: 0;
 }
 .pc-QuestionsBlockItem__title a {
   outline: none;
@@ -45,19 +37,12 @@ unpredictable css rules order in build */
   position: absolute;
   right: 0;
   top: 0;
-  bottom: 0;
-  margin: auto;
   color: var(--g-color-text-primary);
 }
 .pc-QuestionsBlockItem__link {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
 }
-.pc-QuestionsBlockItem__link.pc-QuestionsBlockItem__link a {
-  outline-offset: -2px;
-  border-radius: calc(var(--g-focus-border-radius) + 2px);
-}
-
 .pc-QuestionsBlockItem__text {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);

package/build/esm/blocks/Slider/Arrow/Arrow.css

@@ -49,13 +49,6 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-block-arrow__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-slider-block-arrow__button:focus:not(:focus-visible) {
-  outline: 0;
-}
 .pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);

package/build/esm/blocks/Slider/Slider.js

@@ -133,12 +133,12 @@ export const SliderBlock = (props) => {
     const renderAccessibleBar = (index) => {
         return (
         // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
-        React.createElement(Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (React.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+        React.createElement(Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
                 left: barPosition,
                 width: barWidth,
             } }))));
     };
-    const getCurrentSlideNumber = (index) => {
+    const renderDot = (index) => {
         const currentIndexDiff = index - currentIndex;
         let currentSlideNumber;
         if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
@@ -150,16 +150,10 @@ export const SliderBlock = (props) => {
         else {
             currentSlideNumber = index + 1;
         }
-        return currentSlideNumber;
-    };
-    const isVisibleSlide = (index) => {
-        const currentIndexDiff = index - currentIndex;
-        return (slidesCountByBreakpoint > 0 &&
-            0 <= currentIndexDiff &&
-            currentIndexDiff < slidesToShowCount);
-    };
-    const renderDot = (index) => {
-        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": isVisibleSlide(index) ? true : undefined, "aria-label": `Slide ${getCurrentSlideNumber(index)} of ${barSlidesCount}` }));
+        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": (slidesCountByBreakpoint > 1 &&
+                0 <= currentIndexDiff &&
+                currentIndexDiff < slidesToShowCount) ||
+                undefined, "aria-label": `Slide ${currentSlideNumber} of ${barSlidesCount}` }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

package/build/esm/blocks/Table/schema.d.ts

@@ -45,6 +45,9 @@ export declare const TableBlock: {
                         type: string;
                         enum: string[];
                     };
+                    caption: {
+                        type: string;
+                    };
                     type: {};
                     when: {
                         type: string;

package/build/esm/blocks/Table/schema.js

@@ -42,6 +42,8 @@ export const TableBlock = {
                     }, marker: {
                         type: 'string',
                         enum: ['disk', 'tick'],
+                    }, caption: {
+                        type: 'string',
                     } }),
             } }),
     },

package/build/esm/blocks/Tabs/schema.d.ts

@@ -116,7 +116,27 @@ export declare const tabsItem: {
                             };
                             controls: {
                                 type: string;
-                                enum: string[];
+                                enum: import("../..").MediaVideoControlsType[];
+                            };
+                            customControlsOptions: {
+                                type: string;
+                                additionalProperties: boolean;
+                                properties: {
+                                    type: {
+                                        type: string;
+                                        enum: import("../..").CustomControlsType[];
+                                    };
+                                    muteButtonShown: {
+                                        type: string;
+                                    };
+                                    positioning: {
+                                        type: string;
+                                        enum: import("../..").CustomControlsButtonPositioning[];
+                                    };
+                                };
+                            };
+                            ariaLabel: {
+                                type: string;
                             };
                         };
                     };

package/build/esm/components/Button/Button.css

@@ -1,8 +1,5 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-button-block {
-  --yc-button-outline-color: var(--g-color-line-focus);
-}
 .pc-button-block__content {
   display: flex;
   align-items: center;
@@ -43,9 +40,6 @@ unpredictable css rules order in build */
   color: var(--pc-monochrome-button-color);
 }
 
-.pc-button-block_theme_normal-contrast:focus::before, .pc-button-block_theme_raised:focus::before {
-  outline-offset: 1px;
-}
 .pc-button-block_size_s {
   --btn-image-margin: 10px;
 }

package/build/esm/components/ButtonTabs/ButtonTabs.css

@@ -26,7 +26,4 @@ unpredictable css rules order in build */
 }
 .pc-button-tabs__item.pc-button-tabs__item_active:hover {
   color: var(--pc-selected-tab-item-color);
-}
-.pc-button-tabs__item.pc-button-tabs__item_active:focus::before {
-  outline-offset: 1px;
 }

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -18,7 +18,7 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
     return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
         const isActive = id === activeTabId;
         return (React.createElement(Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
-                'aria-current': isActive || undefined,
+                'aria-current': isActive,
             } }));
     })));
 };

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

@@ -1,5 +1,6 @@
 import React, { HTMLAttributeAnchorTarget, ReactElement } from 'react';
-import { AnalyticsEventsBase, ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+import { AnalyticsEventsBase } from '../../models/common';
 import './CardBase.css';
 export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -1,8 +1,7 @@
 import React, { Children, Fragment } from 'react';
-import { Link } from '@gravity-ui/uikit';
 import { useAnalytics } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
-import { DefaultEventNames, } from '../../models';
+import { DefaultEventNames } from '../../models/common';
 import { block, getQaAttrubutes } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
@@ -51,10 +50,7 @@ export const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
-        React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: {
-                draggable: false,
-                onDragStart: (e) => e.preventDefault(),
-            }, qa: qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 Layout.Header = Header;
 Layout.Content = Content;

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

@@ -4,7 +4,6 @@ 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;
@@ -26,13 +25,6 @@ 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,14 +19,6 @@ 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

@@ -19,15 +19,6 @@ 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;
@@ -42,13 +33,6 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: 0.3s;
 }
-.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_visible {
   opacity: 1;
 }

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

@@ -19,11 +19,11 @@ const FullscreenImage = (props) => {
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullscreenIcon, onMouseLeave: hideFullscreenIcon },
             React.createElement(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
-            React.createElement("button", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal, onFocus: showFullscreenIcon, onBlur: hideFullscreenIcon },
+            React.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), 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("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
+                React.createElement("div", { 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,7 +50,7 @@ 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__media-wrapper .pc-full-screen-media__icon-wrapper_visible {
+.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.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useContext, useState } from 'react';
-import { Button, Icon, Modal } from '@gravity-ui/uikit';
+import React, { useContext, useState } from 'react';
+import { Icon, Modal } from '@gravity-ui/uikit';
 import { MobileContext } from '../../context/mobileContext';
 import { Fullscreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
@@ -11,29 +11,22 @@ const getMediaClass = (type) => b('modal-media', { type });
 const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
-    const [isFullscreenButtonFocused, setIsFullscreenButtonFocused] = useState(false);
     const openModal = (e) => {
         e.stopPropagation();
         setIsOpened(true);
     };
     const closeModal = () => setIsOpened(false);
-    const onShowFullScreenButton = useCallback(() => {
-        setIsFullscreenButtonFocused(true);
-    }, []);
-    const onHideFullScreenButton = useCallback(() => {
-        setIsFullscreenButtonFocused(false);
-    }, []);
     if (isMobile) {
         return children();
     }
     return (React.createElement("div", { className: b() },
-        React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal, onMouseOver: onShowFullScreenButton, onMouseOut: onHideFullScreenButton },
+        React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullscreenIcon && (React.createElement(Button, { className: b('icon-wrapper', { visible: isFullscreenButtonFocused }), extraProps: { onClickCapture: openModal }, size: 'l', onFocus: onShowFullScreenButton, onBlur: onHideFullScreenButton },
+            showFullscreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: 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(Button, { className: b('icon-wrapper', { visible: true }), onClick: closeModal, size: 'l' },
+                React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
                     React.createElement(Icon, { data: PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 children({
                     imageClassName: getMediaClass('image'),