@gravity-ui/page-constructor 4.55.0 → 5.0.0

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

@@ -349,94 +349,6 @@ export declare const MediaBlockBaseProps: {
                     optionName: string;
                 })[];
             };
-            metrikaGoals: {
-                oneOf: ({
-                    type: string;
-                    optionName: string;
-                    items?: undefined;
-                } | {
-                    type: string;
-                    items: {
-                        type: string;
-                        additionalProperties?: undefined;
-                        required?: undefined;
-                        properties?: undefined;
-                    };
-                    optionName: string;
-                } | {
-                    type: string;
-                    items: {
-                        type: string;
-                        additionalProperties: boolean;
-                        required: string[];
-                        properties: {
-                            name: {
-                                type: string;
-                            };
-                            isCrossSite: {
-                                type: string;
-                            };
-                        };
-                    };
-                    optionName: string;
-                })[];
-            };
-            pixelEvents: {
-                type: string;
-                items: {
-                    type: string;
-                    required: string[];
-                    additionalProperties: boolean;
-                    properties: {
-                        name: {
-                            type: string;
-                            enum: import("../..").PixelEventType[];
-                        };
-                        data: {};
-                    };
-                    select: {
-                        $data: string;
-                    };
-                    selectCases: {
-                        SubmitApplication: {
-                            additionalProperties: boolean;
-                            properties: {
-                                name: {};
-                            };
-                        };
-                        Contact: {
-                            additionalProperties: boolean;
-                            properties: {
-                                name: {};
-                            };
-                        };
-                        Lead: {
-                            additionalProperties: boolean;
-                            properties: {
-                                name: {};
-                                data: {
-                                    type: string;
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        content_category: {
-                                            type: string;
-                                        };
-                                        content_name: {
-                                            type: string;
-                                        };
-                                        currency: {
-                                            type: string;
-                                        };
-                                        value: {
-                                            type: string;
-                                        };
-                                    };
-                                };
-                            };
-                        };
-                    };
-                };
-            };
             analyticsEvents: {
                 oneOf: ({
                     optionName: string;
@@ -1035,94 +947,6 @@ export declare const MediaBlock: {
                             optionName: string;
                         })[];
                     };
-                    metrikaGoals: {
-                        oneOf: ({
-                            type: string;
-                            optionName: string;
-                            items?: undefined;
-                        } | {
-                            type: string;
-                            items: {
-                                type: string;
-                                additionalProperties?: undefined;
-                                required?: undefined;
-                                properties?: undefined;
-                            };
-                            optionName: string;
-                        } | {
-                            type: string;
-                            items: {
-                                type: string;
-                                additionalProperties: boolean;
-                                required: string[];
-                                properties: {
-                                    name: {
-                                        type: string;
-                                    };
-                                    isCrossSite: {
-                                        type: string;
-                                    };
-                                };
-                            };
-                            optionName: string;
-                        })[];
-                    };
-                    pixelEvents: {
-                        type: string;
-                        items: {
-                            type: string;
-                            required: string[];
-                            additionalProperties: boolean;
-                            properties: {
-                                name: {
-                                    type: string;
-                                    enum: import("../..").PixelEventType[];
-                                };
-                                data: {};
-                            };
-                            select: {
-                                $data: string;
-                            };
-                            selectCases: {
-                                SubmitApplication: {
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        name: {};
-                                    };
-                                };
-                                Contact: {
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        name: {};
-                                    };
-                                };
-                                Lead: {
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        name: {};
-                                        data: {
-                                            type: string;
-                                            additionalProperties: boolean;
-                                            properties: {
-                                                content_category: {
-                                                    type: string;
-                                                };
-                                                content_name: {
-                                                    type: string;
-                                                };
-                                                currency: {
-                                                    type: string;
-                                                };
-                                                value: {
-                                                    type: string;
-                                                };
-                                            };
-                                        };
-                                    };
-                                };
-                            };
-                        };
-                    };
                     analyticsEvents: {
                         oneOf: ({
                             optionName: string;

package/build/esm/blocks/Security/i18n/index.d.ts

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

package/build/esm/blocks/Security/i18n/index.js

@@ -1,5 +1,5 @@
-import { registerKeyset } from '../../../utils/registerKeyset';
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'SecurityBlock';
-export default registerKeyset({ en, ru }, COMPONENT);
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}SecurityBlock`);

package/build/esm/blocks/Share/Share.css

@@ -24,7 +24,8 @@ unpredictable css rules order in build */
   /* stylelint-disable-next-line declaration-no-important */
   width: 48px !important;
   height: 48px;
-  border-radius: 100%;
+  /* stylelint-disable-next-line declaration-no-important */
+  border-radius: 100% !important;
 }
 .pc-share-block__item.pc-share-block__item_type_vk {
   background-color: var(--pc-color-vk);

package/build/esm/blocks/Share/Share.js

@@ -9,7 +9,7 @@ import { Twitter } from '../../icons/Twitter';
 import { Vk } from '../../icons/Vk';
 import { DefaultEventNames } from '../../models';
 import { block, getAbsolutePath, getShareLink } from '../../utils';
-import i18n from './i18n';
+import { i18n } from './i18n';
 import './Share.css';
 const icons = {
     facebook: Facebook,

package/build/esm/blocks/Share/i18n/index.d.ts

@@ -1,2 +1 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
-export default _default;
+export declare const i18n: (key: "constructor-share" | "facebook-title" | "twitter-title" | "linkedin-title" | "vk-title" | "telegram-title" | "facebook-label" | "twitter-label" | "linkedin-label" | "vk-label" | "telegram-label", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/blocks/Share/i18n/index.js

@@ -1,5 +1,5 @@
-import { registerKeyset } from '../../../utils/registerKeyset';
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'Share';
-export default registerKeyset({ en, ru }, COMPONENT);
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}Share`);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import { block } from '../../../utils';
-import i18n from '../i18n';
+import { i18n } from '../i18n';
 import './Arrow.css';
 const b = block('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },

package/build/esm/blocks/Slider/i18n/index.d.ts

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

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

@@ -1,5 +1,5 @@
-import { registerKeyset } from '../../../utils/registerKeyset';
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'SliderBlock';
-export default registerKeyset({ en, ru }, COMPONENT);
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}SliderBlock`);

package/build/esm/components/BackLink/BackLink.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useContext } from 'react';
+import { ArrowLeft } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { LocationContext } from '../../context/locationContext';
 import { useAnalytics } from '../../hooks';
-import { ArrowSidebar } from '../../icons';
 import { DefaultEventNames } from '../../models';
 export default function BackLink(props) {
     const { history } = useContext(LocationContext);
@@ -24,6 +24,6 @@ export default function BackLink(props) {
         }
     }, [handleAnalytics, history, onClick, url]);
     return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex, extraProps: extraProps },
-        React.createElement(Icon, { data: ArrowSidebar, size: 24 }),
+        React.createElement(Icon, { data: ArrowLeft, size: 20 }),
         React.createElement("span", null, title)));
 }

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

@@ -1,7 +1,7 @@
 /* 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);
+  --g-button-focus-outline-color: var(--g-color-line-focus);
 }
 .pc-button-block__content {
   display: flex;
@@ -17,8 +17,6 @@ unpredictable css rules order in build */
 .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github {
   --g-button-background-color: var(--pc-monochrome-button-background-color);
   --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
-  --yc-button-background-color: var(--pc-monochrome-button-background-color);
-  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
 }
 .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:focus {
   color: var(--pc-monochrome-button-color);
@@ -33,8 +31,6 @@ unpredictable css rules order in build */
 .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome {
   --g-button-background-color: var(--pc-monochrome-button-background-color);
   --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
-  --yc-button-background-color: var(--pc-monochrome-button-background-color);
-  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
 }
 .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:focus {
   color: var(--pc-monochrome-button-color);

package/build/esm/components/Button/Button.js

@@ -4,27 +4,24 @@ import { StoreBadge } from '@gravity-ui/components';
 import { Button as CommonButton, Icon, Platform } from '@gravity-ui/uikit';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useAnalytics } from '../../hooks';
-import { useMetrika } from '../../hooks/useMetrika';
 import { Github } from '../../icons';
 import { DefaultEventNames } from '../../models';
 import { block, setUrlTld } from '../../utils';
-import i18n from './i18n';
+import { i18n } from './i18n';
 import { ICON_QA, toCommonSize, toCommonView } from './utils';
 import './Button.css';
 const b = block('button-block');
 const Button = (props) => {
-    const handleMetrika = useMetrika();
     const { tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, urlTitle, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "urlTitle", "img", "onClick", "text", "width"]);
+    const { className, analyticsEvents, size = 'l', theme = 'normal', url, urlTitle, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "analyticsEvents", "size", "theme", "url", "urlTitle", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
     const onClick = useCallback((e) => {
-        handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics(analyticsEvents);
         if (onClickOrigin) {
             onClickOrigin(e);
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    }, [handleAnalytics, analyticsEvents, onClickOrigin]);
     const buttonModifiers = { size, theme, width };
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }

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

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

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

@@ -1,5 +1,5 @@
-import { registerKeyset } from '../../../utils/registerKeyset';
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'Button';
-export default registerKeyset({ en, ru }, COMPONENT);
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}Button`);

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

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   margin-bottom: 12px;
   --g-button-background-color: var(--pc-tab-item-background-color);
   --g-button-background-color-hover: var(--pc-tab-item-background-color-hover);
-  --yc-button-background-color: var(--pc-tab-item-background-color);
-  --yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
 }
 .pc-button-tabs__item.pc-button-tabs__item, .pc-button-tabs__item.pc-button-tabs__item:link, .pc-button-tabs__item.pc-button-tabs__item:visited, .pc-button-tabs__item.pc-button-tabs__item:active, .pc-button-tabs__item.pc-button-tabs__item:focus {
   color: var(--pc-tab-item-color);
@@ -18,8 +16,6 @@ unpredictable css rules order in build */
   pointer-events: none;
   --g-button-background-color: var(--pc-selected-tab-item-background-color);
   --g-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
-  --yc-button-background-color: var(--pc-selected-tab-item-background-color);
-  --yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
 }
 .pc-button-tabs__item.pc-button-tabs__item_active, .pc-button-tabs__item.pc-button-tabs__item_active:link, .pc-button-tabs__item.pc-button-tabs__item_active:visited, .pc-button-tabs__item.pc-button-tabs__item_active:active, .pc-button-tabs__item.pc-button-tabs__item_active:focus {
   color: var(--pc-selected-tab-item-color);

package/build/esm/components/Buttons/Buttons.css

@@ -0,0 +1,11 @@
+.pc-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 12px;
+}
+.pc-buttons_size_s {
+  row-gap: 8px;
+}
+.pc-buttons_size_l {
+  row-gap: 12px;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonProps, ContentSize } from '../../models';
+import './Buttons.css';
+type ButtonsProps = {
+    className?: string;
+    buttons?: ButtonProps[];
+    size?: ContentSize;
+    titleId?: string;
+    qa?: string;
+    buttonQa?: string;
+};
+declare const Buttons: React.FC<ButtonsProps>;
+export default Buttons;

package/build/esm/components/Buttons/Buttons.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { block } from '../../utils';
+import Button from '../Button/Button';
+import './Buttons.css';
+const b = block('buttons');
+function getButtonSize(size) {
+    switch (size) {
+        case 's':
+            return 'm';
+        case 'l':
+        default:
+            return 'xl';
+    }
+}
+const Buttons = ({ className, titleId, buttons, size = 's', qa, buttonQa }) => buttons ? (React.createElement("div", { className: b({ size }, className), "data-qa": qa }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: buttonQa, extraProps: Object.assign({ 'aria-describedby': item.urlTitle ? undefined : titleId }, item.extraProps) })))))) : null;
+export default Buttons;

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

@@ -1,16 +1,13 @@
-import React, { HTMLAttributeAnchorTarget, ReactElement } from 'react';
-import { AnalyticsEventsBase, ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+import React, { HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
+import { AnalyticsEventsBase, CardBaseProps as CardBaseParams, ImageProps, WithChildren } from '../../models';
 import './CardBase.css';
-export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
+export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, PropsWithChildren {
     className?: string;
     bodyClassName?: string;
     contentClassName?: string;
-    children: ReactElement | ReactElement[];
     url?: string;
     urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;
-    metrikaGoals?: MetrikaGoal;
-    pixelEvents?: ButtonPixel;
     qa?: string;
     extraProps?: React.HTMLAttributes<HTMLElement>;
 }

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

@@ -1,7 +1,6 @@
-import React, { Children, Fragment } from 'react';
+import React, { Children, Fragment, isValidElement, } from 'react';
 import { Link } from '@gravity-ui/uikit';
 import { useAnalytics } from '../../hooks';
-import { useMetrika } from '../../hooks/useMetrika';
 import { DefaultEventNames, } from '../../models';
 import { block, getQaAttrubutes } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
@@ -12,8 +11,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
-    const handleMetrika = useMetrika();
+    const { className, bodyClassName, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
     const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');
@@ -33,12 +31,11 @@ export const Layout = (props) => {
                 break;
         }
     }
-    if (Children.count(children) === 1) {
-        handleChild(children);
-    }
-    else {
-        Children.forEach(children, handleChild);
-    }
+    Children.toArray(children).forEach((child) => {
+        if (isValidElement(child)) {
+            handleChild(child);
+        }
+    });
     const cardContent = (React.createElement(Fragment, null,
         (header || image) && (React.createElement(BackgroundImage, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image), { qa: qaAttributes.header }),
             React.createElement("div", { className: b('header-content') }, header))),
@@ -47,7 +44,6 @@ export const Layout = (props) => {
             footer && (React.createElement("div", { className: b('footer', footerClass), "data-qa": qaAttributes.footer }, footer)))));
     const fullClassName = b({ border }, className);
     const onClick = () => {
-        handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },

package/build/esm/components/Control/Control.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
-import i18n from './i18n';
+import { i18n } from './i18n';
 import './Control.css';
 const b = block('control');
 export const defaultIconId = 'icon-test-id';

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

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

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

@@ -1,5 +1,5 @@
-import { registerKeyset } from '../../../utils/registerKeyset';
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'Control';
-export default registerKeyset({ en, ru }, COMPONENT);
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}Control`);

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

@@ -13,8 +13,9 @@ unpredictable css rules order in build */
   display: flex;
   justify-content: center;
   text-transform: uppercase;
+  width: 52px;
 }
-.pc-file-link__file-label .yc-label__text {
+.pc-file-link__file-label .g-label__text {
   width: initial;
 }
 .pc-file-link__link > a {
@@ -31,15 +32,13 @@ unpredictable css rules order in build */
 .pc-file-link__link > a:hover {
   color: var(--g-color-text-secondary);
 }
-.pc-file-link_size_l .pc-file-link__file-label {
+.pc-file-link_size_l .pc-file-link__file-label, .pc-file-link_size_m .pc-file-link__file-label {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
-  width: 52px;
 }
-.pc-file-link_size_m .pc-file-link__file-label, .pc-file-link_size_s .pc-file-link__file-label {
+.pc-file-link_size_xs .pc-file-link__file-label, .pc-file-link_size_s .pc-file-link__file-label {
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
-  width: 44px;
 }
 .pc-file-link_theme_dark .pc-file-link__link > a {
   color: var(--g-color-text-light-primary);

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

@@ -11,6 +11,7 @@ unpredictable css rules order in build */
 }
 .pc-fullscreen-image__modal-content {
   position: relative;
+  border-radius: var(--pc-border-radius);
 }
 .pc-fullscreen-image__modal-image {
   display: block;

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

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
+import { ChevronsExpandUpRight, Xmark } from '@gravity-ui/icons';
 import { Icon, Modal } from '@gravity-ui/uikit';
-import { Fullscreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
 import Image from '../Image/Image';
-import i18n from './i18n';
+import { i18n } from './i18n';
 import './FullscreenImage.css';
 const b = block('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
-const CLOSE_ICON_SIZE = 30;
+const CLOSE_ICON_SIZE = 24;
 const FullscreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps } = props;
     const [isOpened, setIsOpened] = useState(false);
@@ -17,11 +17,10 @@ const FullscreenImage = (props) => {
         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("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("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) })))))));
+                React.createElement(Icon, { data: ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
+        isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content') },
+            React.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
+                React.createElement(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
+            React.createElement(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) }))))));
 };
 export default FullscreenImage;

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

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

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

@@ -1,5 +1,5 @@
-import { registerKeyset } from '../../../utils/registerKeyset';
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
 import en from './en.json';
 import ru from './ru.json';
-const COMPONENT = 'FullscreenImage';
-export default registerKeyset({ en, ru }, COMPONENT);
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}FullscreenImage`);

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

@@ -17,6 +17,7 @@ unpredictable css rules order in build */
 }
 .pc-full-screen-media__modal-content {
   position: relative;
+  border-radius: var(--pc-border-radius);
 }
 .pc-full-screen-media__inline-media {
   transform: translateZ(0);