@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,28 @@
+import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
+import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+export interface CardBaseProps extends CardBaseParams {
+    className?: string;
+    bodyClassName?: string;
+    contentClassName?: string;
+    children: ReactElement | ReactElement[];
+    url?: string;
+    target?: HTMLAttributeAnchorTarget;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
+}
+export interface CardHeaderBaseProps {
+    className?: string;
+    image?: ImageProps | null;
+}
+export interface CardFooterBaseProps {
+    className?: string;
+}
+export declare const Layout: {
+    (props: CardBaseProps): JSX.Element;
+    Header: React.FC<WithChildren<CardHeaderBaseProps>>;
+    Content: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    Footer: React.FC<WithChildren<CardFooterBaseProps>>;
+};
+export default Layout;

package/build/cjs/components/CardBase/CardBase.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const BackgroundImage_1 = (0, tslib_1.__importDefault)(require("../BackgroundImage/BackgroundImage"));
+const RouterLink_1 = (0, tslib_1.__importDefault)(require("../RouterLink/RouterLink"));
+const useMetrika_1 = require("../../hooks/useMetrika");
+const b = (0, utils_1.block)('card-base-block');
+const Header = () => null;
+const Content = () => null;
+const Footer = () => null;
+const Layout = (props) => {
+    const { className, bodyClassName, metrikaGoals, pixelEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const handleMetrika = (0, useMetrika_1.useMetrika)();
+    let header, content, footer, image, headerClass, footerClass;
+    function handleChild(child) {
+        switch (child.type) {
+            case Header:
+                header = child.props.children;
+                image = child.props.image;
+                headerClass = child.props.className;
+                break;
+            case Content:
+                content = child.props.children;
+                break;
+            case Footer:
+                footer = child.props.children;
+                footerClass = child.props.className;
+                break;
+        }
+    }
+    if (react_1.Children.count(children) === 1) {
+        handleChild(children);
+    }
+    else {
+        react_1.Children.forEach(children, handleChild);
+    }
+    const cardContent = (react_1.default.createElement(react_1.Fragment, null,
+        (header || image) && (react_1.default.createElement(BackgroundImage_1.default, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image)),
+            react_1.default.createElement("div", { className: b('header-content') }, header))),
+        react_1.default.createElement("div", { className: b('body', bodyClassName) },
+            react_1.default.createElement("div", { className: b('content', contentClassName) }, content),
+            footer && react_1.default.createElement("div", { className: b('footer', footerClass) }, footer))));
+    const fullClassName = b({ border }, className);
+    const onClick = () => {
+        handleMetrika({ metrikaGoals, pixelEvents });
+    };
+    return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
+        react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName }, cardContent));
+};
+exports.Layout = Layout;
+exports.Layout.Header = Header;
+exports.Layout.Content = Content;
+exports.Layout.Footer = Footer;
+exports.default = exports.Layout;

package/build/cjs/components/CardBase/schema.d.ts

@@ -0,0 +1,70 @@
+export declare const CardBase: {
+    border: {
+        type: string;
+        enum: string[];
+    };
+};
+export declare const CardBlock: {
+    card: {
+        additionalProperties: boolean;
+        required: never[];
+        properties: {
+            header: {
+                additionalProperties: boolean;
+                required: never[];
+                properties: {
+                    text: {
+                        type: string;
+                    };
+                    image: {
+                        type: string;
+                    };
+                    title: {
+                        type: string;
+                    };
+                };
+            };
+            service: {
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    slug: {
+                        type: string;
+                    };
+                    name: {
+                        type: string;
+                    };
+                };
+            };
+            text: {
+                type: string;
+            };
+            title: {
+                type: string;
+            };
+            footer: {
+                type: string;
+            };
+            url: {
+                type: string;
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            border: {
+                type: string;
+                enum: string[];
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

package/build/cjs/components/CardBase/schema.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardBlock = exports.CardBase = void 0;
+const utils_1 = require("../../schema/validators/utils");
+const common_1 = require("../../schema/validators/common");
+exports.CardBase = {
+    border: {
+        type: 'string',
+        enum: ['border', 'shadow', 'none'],
+    },
+};
+const CardHeader = {
+    additionalProperties: false,
+    required: [],
+    properties: {
+        text: {
+            type: 'string',
+        },
+        image: {
+            type: 'string',
+        },
+        title: {
+            type: 'string',
+        },
+    },
+};
+const CardService = {
+    additionalProperties: false,
+    required: ['slug', 'name'],
+    properties: {
+        slug: {
+            type: 'string',
+        },
+        name: {
+            type: 'string',
+        },
+    },
+};
+exports.CardBlock = {
+    card: {
+        additionalProperties: false,
+        required: [],
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), exports.CardBase), { header: CardHeader, service: CardService, text: {
+                type: 'string',
+            }, title: {
+                type: 'string',
+            }, footer: {
+                type: 'string',
+            }, url: {
+                type: 'string',
+            }, links: (0, utils_1.filteredArray)(common_1.LinkProps) }),
+    },
+};

package/build/cjs/components/Control/Control.css

@@ -0,0 +1,80 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: color 0.2s;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+.pc-control .pc-control_theme_primary, .pc-control .pc-control_theme_secondary, .pc-control .pc-control_theme_link {
+  transition: color 0.2s;
+}
+.pc-control .pc-control_theme_accent {
+  transition: opacity 0.2s;
+}
+.utilityfocus .pc-control:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-control_size_xs {
+  width: 24px;
+  height: 24px;
+}
+.pc-control_size_s {
+  width: 28px;
+  height: 28px;
+}
+.pc-control_size_m {
+  width: 32px;
+  height: 32px;
+}
+.pc-control_size_l {
+  width: 36px;
+  height: 36px;
+}
+.pc-control_theme_primary {
+  color: var(--yc-color-text-complementary);
+}
+.pc-control_theme_primary:hover {
+  color: var(--yc-color-text-primary);
+}
+.pc-control_theme_secondary {
+  color: var(--yc-color-text-secondary);
+}
+.pc-control_theme_secondary:hover {
+  color: var(--yc-color-text-complementary);
+}
+.pc-control_theme_link {
+  color: var(--yc-color-text-complementary);
+}
+.pc-control_theme_link:hover {
+  color: var(--yc-color-text-link-hover);
+}
+.pc-control_theme_accent {
+  opacity: 0.7;
+  color: var(--yc-color-text-yandex-red);
+}
+.pc-control_theme_accent:hover {
+  opacity: 1;
+}
+.pc-control_disabled {
+  cursor: default;
+  color: var(--yc-color-text-secondary);
+}
+.pc-control_disabled:hover {
+  color: var(--yc-color-text-secondary);
+}
+@media (max-width: 768px) {
+  .pc-control:hover {
+    color: inherit;
+  }
+}

package/build/cjs/components/Control/Control.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SVGIconData } from '@gravity-ui/uikit/build/esm/components/Icon/types';
+export interface ControlProps {
+    icon: SVGIconData;
+    theme?: 'primary' | 'secondary' | 'link' | 'accent';
+    size?: 'xs' | 's' | 'm' | 'l';
+    iconSize?: number;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}
+declare const Control: (props: ControlProps) => JSX.Element;
+export default Control;

package/build/cjs/components/Control/Control.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('control');
+const Control = (props) => {
+    const { icon, theme = 'primary', size = 's', iconSize = 16, disabled = false, onClick, className, } = props;
+    return (react_1.default.createElement("button", { type: "button", className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled },
+        react_1.default.createElement(uikit_1.Icon, { data: icon, size: iconSize })));
+};
+exports.default = Control;

package/build/cjs/components/ErrorWrapper/ErrorWrapper.css

@@ -0,0 +1,11 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-ErrorWrapper {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+  white-space: nowrap;
+  color: var(--yc-color-text-danger);
+}
+.pc-ErrorWrapper__text {
+  margin-bottom: 5px;
+}

package/build/cjs/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClassNameProps, WithChildren } from '../../models';
+export interface ErrorWrapperProps extends ClassNameProps {
+    text: string;
+    handler: () => void;
+    isError: boolean;
+    buttonText: string;
+    children: React.ReactNode;
+}
+declare const ErrorWrapper: ({ text, buttonText, className, handler, isError, children, }: WithChildren<ErrorWrapperProps>) => JSX.Element;
+export default ErrorWrapper;

package/build/cjs/components/ErrorWrapper/ErrorWrapper.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('ErrorWrapper');
+const ErrorWrapper = ({ text, buttonText, className, handler, isError, children, }) => isError ? (react_1.default.createElement("div", { className: b(null, className) },
+    react_1.default.createElement("div", { className: b('text') }, text),
+    handler && (react_1.default.createElement(uikit_1.Button, { size: "s", onClick: handler }, buttonText)))) : (react_1.default.createElement(react_1.default.Fragment, null, children));
+exports.default = ErrorWrapper;

package/build/cjs/components/FileLink/FileLink.css

@@ -0,0 +1,87 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-file-link {
+  --pc-color-label-background: rgba(0, 0, 0, 0.07);
+  align-items: baseline;
+}
+.pc-file-link_ext_pdf {
+  --pc-file-label-color: var(--yc-color-promo-highlight-tomato);
+}
+.pc-file-link_ext_doc {
+  --pc-file-label-color: var(--yc-color-promo-highlight-sky);
+}
+.pc-file-link_ext_xls {
+  --pc-file-label-color: var(--yc-color-promo-highlight-mint);
+}
+.pc-file-link_ext_ppt {
+  --pc-file-label-color: var(--yc-color-promo-highlight-copper);
+}
+.pc-file-link_ext_fig {
+  --pc-file-label-color: var(--yc-color-promo-highlight-neon);
+}
+.pc-file-link_ext_zip {
+  --pc-file-label-color: var(--yc-color-promo-highlight-asphalt);
+}
+.pc-file-link_type_horizontal {
+  display: flex;
+}
+.pc-file-link_type_horizontal .pc-file-link__file-label {
+  margin-right: 8px;
+}
+.pc-file-link__file-label {
+  flex: 0 0 auto;
+  width: 44px;
+  height: 24px;
+  line-height: 24px;
+  background-color: var(--pc-file-label-color);
+  color: var(--yc-color-text-light-primary);
+  border-radius: 4px;
+  text-transform: uppercase;
+  text-align: center;
+}
+.pc-file-link__file-label {
+  color: var(--yc-color-text-primary);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.pc-file-link__link > a {
+  color: var(--yc-color-text-primary);
+}
+.pc-file-link__link > a:hover {
+  color: var(--yc-color-text-secondary);
+}
+.pc-file-link_size_l .pc-file-link__file-label {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  width: 44px;
+  height: 24px;
+  padding: 2px 6px;
+}
+.pc-file-link_size_m .pc-file-link__file-label, .pc-file-link_size_s .pc-file-link__file-label {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+  width: 36px;
+  height: 20px;
+  padding: 1px 4px;
+}
+.pc-file-link_theme_dark .pc-file-link__file-label {
+  color: var(--yc-color-text-light-primary);
+  background-color: var(--yc-color-base-light-simple-hover);
+}
+.pc-file-link_theme_dark .pc-file-link__link > a {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-file-link_theme_dark .pc-file-link__link > a:hover {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-file-link_theme_light .pc-file-link__file-label {
+  color: var(--yc-color-text-dark-primary);
+  background-color: var(--pc-color-label-background);
+}
+.pc-file-link_theme_light .pc-file-link__link > a {
+  color: var(--yc-color-text-dark-primary);
+}
+.pc-file-link_theme_light .pc-file-link__link > a:hover {
+  color: var(--yc-color-text-dark-secondary);
+}

package/build/cjs/components/FileLink/FileLink.d.ts

@@ -0,0 +1,12 @@
+import { FileLinkProps, WithChildren } from '../../models';
+export declare enum FileExtension {
+    PDF = "pdf",
+    DOC = "doc",
+    XLS = "xls",
+    PPT = "ppt",
+    FIG = "fig",
+    ZIP = "zip"
+}
+export declare function getFileExt(name: string): string;
+declare const FileLink: (props: WithChildren<FileLinkProps>) => JSX.Element;
+export default FileLink;

package/build/cjs/components/FileLink/FileLink.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileExt = exports.FileExtension = void 0;
+const tslib_1 = require("tslib");
+const utils_1 = require("../../utils");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const locationContext_1 = require("../../context/locationContext");
+const b = (0, utils_1.block)('file-link');
+const FIGMA_URL = 'https://www.figma.com';
+var FileExtension;
+(function (FileExtension) {
+    FileExtension["PDF"] = "pdf";
+    FileExtension["DOC"] = "doc";
+    FileExtension["XLS"] = "xls";
+    FileExtension["PPT"] = "ppt";
+    FileExtension["FIG"] = "fig";
+    FileExtension["ZIP"] = "zip";
+})(FileExtension = exports.FileExtension || (exports.FileExtension = {}));
+function getFileExt(name) {
+    if (name.includes(FIGMA_URL)) {
+        return FileExtension.FIG;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return name && name.split('.').pop().toLowerCase();
+}
+exports.getFileExt = getFileExt;
+const FileLink = (props) => {
+    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, } = props;
+    const fileExt = getFileExt(href);
+    return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
+        Object.values(FileExtension).includes(fileExt) && (react_1.default.createElement("div", { className: b('file-label') }, fileExt)),
+        react_1.default.createElement("div", { className: b('link') },
+            react_1.default.createElement("a", Object.assign({ href: href }, (0, utils_1.getLinkProps)(href, hostname), { onClick: onClick }), text))));
+};
+exports.default = FileLink;

package/build/cjs/components/Foldable/Foldable.css

@@ -0,0 +1,7 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-foldable-block__content-container {
+  height: 0;
+  overflow-y: hidden;
+  transition: height 300ms, margin-bottom 300ms;
+}

package/build/cjs/components/Foldable/Foldable.d.ts

@@ -0,0 +1,7 @@
+import { WithChildren } from '../../models';
+export interface FoldableProps {
+    isOpened: boolean;
+    className?: string;
+}
+declare const Foldable: ({ isOpened, children, className }: WithChildren<FoldableProps>) => JSX.Element;
+export default Foldable;

package/build/cjs/components/Foldable/Foldable.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const HeightCalculator_1 = (0, tslib_1.__importDefault)(require("../../components/HeightCalculator/HeightCalculator"));
+const b = (0, utils_1.block)('foldable-block');
+const Foldable = ({ isOpened, children, className }) => {
+    const contentRef = (0, react_1.useRef)(null);
+    const [contentHeight, setContentHeight] = (0, react_1.useState)();
+    const onHeightCalculation = (0, react_1.useCallback)((height) => {
+        setContentHeight(height);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (contentRef && contentRef.current) {
+            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        }
+    }, [isOpened, contentHeight]);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
+        react_1.default.createElement(HeightCalculator_1.default, { onCalculate: onHeightCalculation }, children)));
+};
+exports.default = Foldable;

package/build/cjs/components/FullWidthBackground/FullWidthBackground.css

@@ -0,0 +1,13 @@
+.pc-FullWidthBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--yc-color-base-background);
+  z-index: 0;
+  pointer-events: none;
+}
+.pc-FullWidthBackground_rounded {
+  border-radius: var(--pc-border-radius);
+}

package/build/cjs/components/FullWidthBackground/FullWidthBackground.d.ts

@@ -0,0 +1,13 @@
+import { Component, CSSProperties, PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../models';
+export interface FullWidthBackgroundProps extends ClassNameProps {
+    style?: CSSProperties;
+    theme?: 'default' | 'rounded';
+}
+export default class FullWidthBackground extends Component<PropsWithChildren<FullWidthBackgroundProps>> {
+    private ref;
+    private setBg;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

package/build/cjs/components/FullWidthBackground/FullWidthBackground.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
+const b = (0, utils_1.block)('FullWidthBackground');
+function getPadding(width) {
+    return width > constants_1.BREAKPOINTS.sm ? 16 : 8;
+}
+class FullWidthBackground extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = (0, react_1.createRef)();
+        this.setBg = lodash_1.default.debounce(() => {
+            var _a, _b;
+            if (this.ref && this.ref.current) {
+                const bg = this.ref.current;
+                const width = document.documentElement.clientWidth || document.body.clientWidth;
+                const padding = this.props.theme === 'rounded' ? getPadding(width) : 0;
+                const { left } = (_b = (_a = bg.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { left: 0 };
+                bg.style.width = `${width - padding * 2}px`;
+                bg.style.left = `-${left - padding}px`;
+            }
+        }, 100);
+    }
+    componentDidMount() {
+        var _a, _b;
+        if ((_b = (_a = this === null || this === void 0 ? void 0 : this.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.parentElement) {
+            this.ref.current.parentElement.style.position = 'relative';
+            this.setBg();
+            window.addEventListener('resize', this.setBg);
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.setBg);
+    }
+    render() {
+        const { children, className, style, theme = 'default' } = this.props;
+        return (react_1.default.createElement("div", { className: b({ [theme]: true }, className), ref: this.ref, style: style }, children));
+    }
+}
+exports.default = FullWidthBackground;

package/build/cjs/components/FullscreenImage/FullScreenImage.css

@@ -0,0 +1,60 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-FullScreenImage__image {
+  cursor: pointer;
+}
+.pc-FullScreenImage__image-wrapper {
+  position: relative;
+}
+.pc-FullScreenImage__modal-content {
+  position: relative;
+}
+.pc-FullScreenImage__modal-image {
+  display: block;
+  max-width: 1232px;
+  max-height: 70vh;
+  overflow: hidden;
+}
+.pc-FullScreenImage__modal .yc-modal__content, .pc-FullScreenImage__modal-image {
+  border-radius: var(--pc-border-radius);
+}
+.pc-FullScreenImage__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: var(--yc-color-base-simple-hover-solid);
+  cursor: pointer;
+  opacity: 0;
+  transition: 0.3s;
+}
+.pc-FullScreenImage__icon-wrapper_visible {
+  opacity: 1;
+}
+.pc-FullScreenImage__icon {
+  color: var(--yc-color-text-hint);
+}
+.pc-FullScreenImage__icon_hover:hover {
+  color: var(--yc-color-text-secondary);
+}
+@media (max-width: 1185px) {
+  .pc-FullScreenImage__modal-image {
+    width: 100%;
+  }
+}
+@media (max-width: 1081px) {
+  .pc-FullScreenImage__image {
+    pointer-events: none;
+  }
+  .pc-FullScreenImage__icon-wrapper {
+    display: none;
+  }
+  .pc-FullScreenImage__modal {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+}