@doyourjob/gravity-ui-page-constructor 5.31.97 → 5.31.100

package/build/cjs/blocks/SliderNew/Slider.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Swiper as SwiperReact } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/pagination';
+import type { SwiperProps } from 'swiper/react';
 import { ClassNameProps, Refable, SliderProps as SliderParams } from '../../models';
-import 'swiper/swiper-bundle.css';
-export type { Swiper, SwiperOptions } from 'swiper';
-export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<SwiperReact, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
+export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<SwiperProps, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
     type?: string;
     anchorId?: string;
     dotsClassName?: string;

package/build/cjs/blocks/SliderNew/Slider.js

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SliderNewBlock = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const swiper_1 = tslib_1.__importStar(require("swiper"));
+require("swiper/css");
+require("swiper/css/autoplay");
+require("swiper/css/pagination");
+const modules_1 = require("swiper/modules");
 const react_1 = require("swiper/react");
 const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
@@ -14,12 +17,9 @@ const Arrow_1 = tslib_1.__importDefault(require("./Arrow/Arrow"));
 const i18n_1 = require("./i18n");
 const useSlider_1 = require("./useSlider");
 const useSliderPagination_1 = require("./useSliderPagination");
-require("swiper/swiper-bundle.css");
 const b = (0, utils_1.block)('slider-new-block');
-// eslint-disable-next-line react-hooks/rules-of-hooks
-swiper_1.default.use([swiper_1.Autoplay, swiper_1.A11y, swiper_1.Pagination]);
 const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, infinite = false, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
-    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onImagesReady, onPrev, onNext, setIsLocked, } = (0, useSlider_1.useSlider)({
+    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, handleSwiperInit, onPrev, onNext, setIsLocked, } = (0, useSlider_1.useSlider)({
         slidesToShow,
         children,
         type,
@@ -46,14 +46,13 @@ const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows =
         anchorId && React.createElement(Anchor_1.default, { id: anchorId }),
         React.createElement(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
         React.createElement(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated },
-            React.createElement(react_1.Swiper, Object.assign({ className: b('slider', className), onSwiper: onSwiper, speed: 700, autoplay: autoplay, loop: infinite, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, slidesOffsetBefore: 24, slidesOffsetAfter: 24, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), onImagesReady: onImagesReady, watchSlidesVisibility: true, watchOverflow: true, a11y: {
+            React.createElement(react_1.Swiper, Object.assign({ modules: [modules_1.Autoplay, modules_1.A11y, modules_1.Pagination], className: b('slider', className), onSwiper: onSwiper, speed: 700, autoplay: autoplay, loop: infinite, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, slidesOffsetBefore: 24, slidesOffsetAfter: 24, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), onInit: handleSwiperInit, watchSlidesProgress: true, watchOverflow: true, a11y: {
                     slideLabelMessage: '',
                     paginationBulletMessage: (0, i18n_1.i18n)('dot-label', { index: '{{index}}' }),
                 } }, paginationProps), React.Children.map(children, (elem, index) => (React.createElement(react_1.SwiperSlide, { className: b('slide'), key: index }, ({ isVisible }) => (React.createElement("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible }, elem)))))),
-            arrows && !isLocked && (React.createElement(React.Fragment, null,
-                React.createElement("div", { "aria-hidden": isA11yControlHidden },
-                    React.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
-                    React.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })))),
+            arrows && !isLocked && (React.createElement("div", { "aria-hidden": isA11yControlHidden },
+                React.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                React.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }))),
             React.createElement("div", { className: b('footer') }, disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }) }, disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text)) : null))));
 };
 exports.SliderNewBlock = SliderNewBlock;

package/build/cjs/blocks/SliderNew/useSlider.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { Swiper } from 'swiper';
 import { SlidesToShow } from '../../models';
 type UseSliderProps = React.PropsWithChildren<{
     autoplayMs?: number;
@@ -7,12 +6,12 @@ type UseSliderProps = React.PropsWithChildren<{
     slidesToShow?: SlidesToShow;
 }>;
 export declare const useSlider: ({ children, autoplayMs, type, ...props }: UseSliderProps) => {
-    slider: Swiper | undefined;
-    onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
+    slider: any;
+    onSwiper: React.Dispatch<any>;
     onNext: () => void;
     onPrev: () => void;
-    onImagesReady: (localSlider: Swiper) => void;
-    breakpoints: Record<number, import("swiper").SwiperOptions>;
+    handleSwiperInit: (swiper: Swiper) => void;
+    breakpoints: Record<number, import("swiper/types/swiper-options").SwiperOptions>;
     childrenCount: number;
     isLocked: boolean;
     setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;

package/build/cjs/blocks/SliderNew/useSlider.js

@@ -39,11 +39,12 @@ const useSlider = (_a) => {
         }
         slider.slidePrev();
     };
-    const handleImagesReady = React.useCallback((localSlider) => {
-        setTimeout(() => localSlider.update(), 100);
-    }, []);
+    const handleSwiperInit = (swiper) => {
+        setSlider(swiper);
+        setTimeout(() => swiper.update(), 100);
+    };
     React.useEffect(() => {
-        if (!slider) {
+        if (!slider || !slider.autoplay) {
             return;
         }
         if (autoplayEnabled) {
@@ -58,7 +59,7 @@ const useSlider = (_a) => {
         onSwiper: setSlider,
         onNext: handleNext,
         onPrev: handlePrev,
-        onImagesReady: handleImagesReady,
+        handleSwiperInit,
         breakpoints,
         childrenCount,
         isLocked,

package/build/cjs/blocks/SliderNew/useSliderPagination.d.ts

@@ -1,4 +1,4 @@
-import { Swiper as SwiperProps } from 'swiper/swiper-react';
+import type { SwiperProps } from 'swiper/react';
 export declare const useSliderPagination: (props: {
     enabled: boolean;
     isA11yControlHidden: boolean;

package/build/cjs/components/BackgroundImage/BackgroundImage.css

@@ -11,6 +11,10 @@
   height: 100%;
   object-fit: cover;
 }
+.pc-storage-background-image__img_hover {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
 .pc-storage-background-image__container {
   position: relative;
 }

package/build/cjs/components/BackgroundImage/BackgroundImage.js

@@ -5,13 +5,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const utils_2 = require("../Media/Image/utils");
 exports.qaIdByDefault = 'background-image';
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
+    const { children, src, desktop, className, hoverImage, imageClassName, style, hide, qa } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa || exports.qaIdByDefault);
     return (react_1.default.createElement("div", { className: b(null, className), style: style, "data-qa": qa || exports.qaIdByDefault },
-        (src || desktop) && !hide && (react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName), qa: qaAttributes.image }))),
+        (src || desktop) && !hide && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName), qa: qaAttributes.image })),
+            hoverImage && (react_1.default.createElement(Image_1.default, Object.assign({}, (0, utils_2.getMediaImage)(hoverImage || ''), { className: b('img', { hover: true }, imageClassName), qa: qaAttributes.image }))))),
         children && react_1.default.createElement("div", { className: b('container') }, children)));
 };
 exports.default = BackgroundImage;

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

@@ -14,6 +14,7 @@ export type CardBasePropsType = PropsWithChildren<CardBaseProps>;
 export interface CardHeaderBaseProps {
     className?: string;
     image?: ImageProps | null;
+    hoverImage?: ImageProps | null;
     imageExtraProps?: React.HTMLAttributes<HTMLImageElement>;
 }
 export interface CardFooterBaseProps {

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

@@ -8,6 +8,7 @@ const hooks_1 = require("../../hooks");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
+const utils_2 = require("../Media/Image/utils");
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
 const b = (0, utils_1.block)('card-base-block');
 const Header = () => null;
@@ -17,13 +18,14 @@ const Layout = (props) => {
     const { className, bodyClassName, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.CardBase, url);
     const qaAttributes = (0, react_1.useMemo)(() => (0, utils_1.getQaAttrubutes)(qa, 'header', 'footer', 'body', 'content'), [qa]);
-    const { header, content, footer, image, imageExtraProps, headerClass, footerClass } = (0, react_1.useMemo)(() => {
-        let _header, _content, _footer, _image, _imageExtraProps, _headerClass, _footerClass;
+    const { header, content, footer, image, hoverImage, imageExtraProps, headerClass, footerClass } = (0, react_1.useMemo)(() => {
+        let _header, _content, _footer, _image, _hoverImage, _imageExtraProps, _headerClass, _footerClass;
         function handleChild(child) {
             switch (child.type) {
                 case Header:
                     _header = child.props.children;
                     _image = child.props.image;
+                    _hoverImage = child.props.hoverImage;
                     _imageExtraProps = child.props.imageExtraProps;
                     _headerClass = child.props.className;
                     break;
@@ -46,27 +48,32 @@ const Layout = (props) => {
             content: _content,
             footer: _footer,
             image: _image,
+            hoverImage: _hoverImage,
             imageExtraProps: _imageExtraProps,
             headerClass: _headerClass,
             footerClass: _footerClass,
         };
     }, [children]);
     const cardContent = (0, react_1.useMemo)(() => (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), { extraProps: imageExtraProps, qa: qaAttributes.header }),
+        (header || image) && (react_1.default.createElement(BackgroundImage_1.default, Object.assign({ className: b('header', headerClass) }, (0, utils_2.getMediaImage)(image || ''), { hoverImage: hoverImage, extraProps: imageExtraProps, qa: qaAttributes.header }),
             react_1.default.createElement("div", { className: b('header-content') }, header))),
         react_1.default.createElement("div", { className: b('body', bodyClassName), "data-qa": qaAttributes.body },
             react_1.default.createElement("div", { className: b('content', contentClassName), "data-qa": qaAttributes.content }, content),
             footer && (react_1.default.createElement("div", { className: b('footer', footerClass), "data-qa": qaAttributes.footer }, footer))))), [
         header,
-        content,
         image,
-        imageExtraProps,
         headerClass,
+        hoverImage,
+        imageExtraProps,
+        qaAttributes.header,
+        qaAttributes.body,
+        qaAttributes.content,
+        qaAttributes.footer,
         bodyClassName,
         contentClassName,
+        content,
         footer,
         footerClass,
-        qaAttributes,
     ]);
     const fullClassName = (0, react_1.useMemo)(() => b({ border }, className), [border, className]);
     const onClick = (0, react_1.useCallback)(() => {

package/build/cjs/models/constructor-items/common.d.ts

@@ -113,6 +113,7 @@ export interface ImageDeviceProps extends ImageInfoProps {
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
 export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
+    hoverImage?: ImageProps;
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -104,6 +104,7 @@ export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase,
     urlTitle?: string;
     target?: string;
     background?: ThemeSupporting<ImageObjectProps>;
+    hoverBackground?: ThemeSupporting<ImageObjectProps>;
     backgroundPosition?: 'left' | 'right' | 'center' | 'top' | 'bottom';
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
@@ -119,8 +120,9 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 }
 export interface CardProps extends CardBaseProps, Pick<ContentBlockProps, 'summary' | 'text'> {
     header: {
-        image: string;
         title: string;
+        image: string;
+        hoverImage?: string;
     };
     service?: ServiceLabelProps;
     label?: TagProps;
@@ -173,6 +175,7 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
 }
 export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
     image: ThemeSupporting<ImageProps>;
+    hoverImage: ThemeSupporting<ImageProps>;
     enableImageBorderRadius?: boolean;
     margins?: ImageCardMargins;
     direction?: ImageCardDirection;
@@ -249,6 +252,7 @@ export interface CaseStudyCardProps {
 }
 export interface EventPersonCardProps {
     image: ThemeSupporting<ImageProps>;
+    hoverImage?: ThemeSupporting<ImageProps>;
     title?: TitleItemBaseProps | string;
     subtitle?: string;
     text?: string;

package/build/cjs/schema/constants.d.ts

@@ -465,30 +465,77 @@ export declare const cardSchemas: {
                 enum: string[];
             };
             image: {
-                oneOf: ({
-                    type: string;
-                    properties: {
-                        when: {
+                oneOf: (({
+                    oneOf: ({
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    } | {
+                        type: string;
+                        pattern: string;
+                        optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
                             type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
                         };
-                    };
-                } | {
-                    type: string;
-                    pattern: string;
+                        optionName: string;
+                        pattern?: undefined;
+                    })[];
+                } & {
                     optionName: string;
-                    items?: undefined;
-                } | {
+                }) | {
                     type: string;
-                    items: {
+                    additionalProperties: boolean;
+                    required: import("../models").Theme[];
+                    properties: {};
+                    optionName: string;
+                })[];
+            };
+            hoverImage: {
+                oneOf: (({
+                    oneOf: ({
                         type: string;
                         properties: {
                             when: {
                                 type: string;
                             };
                         };
-                    };
+                    } | {
+                        type: string;
+                        pattern: string;
+                        optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
+                    })[];
+                } & {
+                    optionName: string;
+                }) | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: import("../models").Theme[];
+                    properties: {};
                     optionName: string;
-                    pattern?: undefined;
                 })[];
             };
             type: {};
@@ -583,6 +630,9 @@ export declare const cardSchemas: {
                     image: {
                         type: string;
                     };
+                    hoverImage: {
+                        type: string;
+                    };
                     title: {
                         type: string;
                     };
@@ -1200,30 +1250,77 @@ export declare const cardSchemas: {
         required: string[];
         properties: {
             image: {
-                oneOf: ({
-                    type: string;
-                    properties: {
-                        when: {
+                oneOf: (({
+                    oneOf: ({
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    } | {
+                        type: string;
+                        pattern: string;
+                        optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
                             type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
                         };
-                    };
-                } | {
-                    type: string;
-                    pattern: string;
+                        optionName: string;
+                        pattern?: undefined;
+                    })[];
+                } & {
                     optionName: string;
-                    items?: undefined;
-                } | {
+                }) | {
                     type: string;
-                    items: {
+                    additionalProperties: boolean;
+                    required: import("../models").Theme[];
+                    properties: {};
+                    optionName: string;
+                })[];
+            };
+            hoverImage: {
+                oneOf: (({
+                    oneOf: ({
                         type: string;
                         properties: {
                             when: {
                                 type: string;
                             };
                         };
-                    };
+                    } | {
+                        type: string;
+                        pattern: string;
+                        optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
+                    })[];
+                } & {
+                    optionName: string;
+                }) | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: import("../models").Theme[];
+                    properties: {};
                     optionName: string;
-                    pattern?: undefined;
                 })[];
             };
             direction: {
@@ -2332,6 +2429,61 @@ export declare const cardSchemas: {
                     optionName: string;
                 })[];
             };
+            hoverBackground: {
+                oneOf: (({
+                    required: string[];
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {
+                        src: {
+                            type: string;
+                            pattern: string;
+                        };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        alt: {
+                            type: string;
+                            contentType: string;
+                        };
+                        disableCompress: {
+                            type: string;
+                        };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
+                    };
+                } & {
+                    optionName: string;
+                }) | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: import("../models").Theme[];
+                    properties: {};
+                    optionName: string;
+                })[];
+            };
             backgroundColor: {
                 type: string;
             };

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

@@ -58,6 +58,13 @@ unpredictable css rules order in build */
 .pc-background-card__image img {
   object-fit: cover;
 }
+.pc-background-card__image_hover {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+.pc-background-card:hover .pc-background-card__image_hover {
+  opacity: 1;
+}
 
 a.pc-background-card_theme_light {
   background-color: var(--pc-color-base-silver);

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

@@ -4,24 +4,28 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components/");
+const utils_1 = require("../../components/Media/Image/utils");
 const theme_1 = require("../../context/theme");
-const utils_1 = require("../../utils");
+const utils_2 = require("../../utils");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
-const b = (0, utils_1.block)('background-card');
+const b = (0, utils_2.block)('background-card');
 const BackgroundCard = (props) => {
-    const { url, target, title, summary, text, border, background, backgroundPosition = 'left', paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, controlPosition = 'content', list, label, } = props;
+    const { url, target, title, summary, text, border, background, hoverBackground, backgroundPosition = 'left', paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, controlPosition = 'content', list, label, } = props;
     const titleId = (0, uikit_1.useUniqId)();
     const theme = (0, theme_1.useTheme)();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
     const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
+    const backgroundProps = (0, utils_1.getMediaImage)((0, utils_2.getThemedValue)(background, theme) || '');
+    const hoverBackgroundProps = (0, utils_1.getMediaImage)((0, utils_2.getThemedValue)(hoverBackground, theme) || '');
     return (react_1.default.createElement(components_1.CardBase, { className: b({
             padding: paddingBottom,
             theme: cardTheme,
             bgPosition: backgroundPosition,
         }), contentClassName: b('content'), url: url, target: target, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         react_1.default.createElement(components_1.CardBase.Content, null,
-            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
+            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, backgroundProps, { style: { backgroundColor } })),
+            hoverBackground && (react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image', { hover: true }) }, hoverBackgroundProps, { style: { backgroundColor } }))),
             label && react_1.default.createElement(components_1.Tag, Object.assign({}, label)),
             react_1.default.createElement(Content_1.default, { className: b('data'), titleId: titleId, title: title, summary: summary, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, list: list, colSizes: { all: 12, md: 12 }, controlPosition: areControlsInFooter ? 'bottom' : 'default' }))));
 };

package/build/cjs/sub-blocks/BackgroundCard/schema.d.ts

@@ -68,6 +68,61 @@ export declare const BackgroundCard: {
                     optionName: string;
                 })[];
             };
+            hoverBackground: {
+                oneOf: (({
+                    required: string[];
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {
+                        src: {
+                            type: string;
+                            pattern: string;
+                        };
+                        style: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                backgroundColor: {
+                                    type: string;
+                                };
+                                height: {
+                                    type: string[];
+                                };
+                                width: {
+                                    type: string[];
+                                };
+                                color: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        alt: {
+                            type: string;
+                            contentType: string;
+                        };
+                        disableCompress: {
+                            type: string;
+                        };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
+                    };
+                } & {
+                    optionName: string;
+                }) | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: import("../..").Theme[];
+                    properties: {};
+                    optionName: string;
+                })[];
+            };
             backgroundColor: {
                 type: string;
             };

package/build/cjs/sub-blocks/BackgroundCard/schema.js

@@ -19,7 +19,7 @@ exports.BackgroundCard = {
             }, target: {
                 type: 'string',
                 enum: ['_blank', '_parent', '_top', '_self'],
-            }, background: (0, common_1.withTheme)(schema_1.ImageObjectProps), backgroundColor: {
+            }, background: (0, common_1.withTheme)(schema_1.ImageObjectProps), hoverBackground: (0, common_1.withTheme)(schema_1.ImageObjectProps), backgroundColor: {
                 type: 'string',
             }, backgroundPosition: {
                 type: 'string',

package/build/cjs/sub-blocks/Card/Card.css

@@ -10,6 +10,9 @@ unpredictable css rules order in build */
 .pc-card__header p {
   margin: 0;
 }
+.pc-card:hover .pc-storage-background-image__img_hover {
+  opacity: 1;
+}
 .pc-card__title {
   font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
   line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));