@gravity-ui/page-constructor 4.47.0-beta.0 → 4.47.2

package/build/cjs/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "justifyContent" | "offsets" | "orders" | "alignSelf"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
-import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
 import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
@@ -166,7 +166,6 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mobileDirection?: MediaDirection;
     largeMedia?: boolean;
     mediaOnly?: boolean;
-    disableShadow?: boolean;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
 export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
@@ -175,10 +174,10 @@ export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' |
     /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
 }
-export interface MediaBlockProps extends MediaBaseBlockProps {
+export interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {
     media: ThemeSupporting<MediaProps>;
 }
-export interface MapBlockProps extends MediaBaseBlockProps {
+export interface MapBlockProps extends MediaBaseBlockProps, WithBorder {
     map: MapProps;
 }
 export interface InfoBlockProps {
@@ -234,7 +233,9 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
-    background?: BackgroundImageProps;
+    background?: BackgroundImageProps & {
+        border?: CardBorder;
+    };
 }
 export type FilterTag = {
     id: string;

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

@@ -215,6 +215,7 @@ export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
+    className?: string;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -257,14 +258,12 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
-export type JustifyValues = 'left' | 'right' | 'center';
 export interface IframeProps {
     src: string;
-    width?: number | string;
-    height?: number | string;
+    width?: number;
+    height?: number;
     title?: string;
     name?: string;
-    justifyContent?: JustifyValues;
 }
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {
@@ -294,7 +293,8 @@ export interface TitleItemBaseProps {
     custom?: string | ReactNode;
     onClick?: () => void;
 }
-export type CardBorder = 'shadow' | 'line' | 'none';
+export type MediaBorder = 'shadow' | 'line' | 'none';
+export type CardBorder = MediaBorder;
 export interface CardBaseProps {
     border?: CardBorder;
 }
@@ -370,4 +370,11 @@ export interface YandexFormProps extends AnalyticsEventsBase {
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
 }
+export interface WithBorder {
+    border?: MediaBorder;
+    /**
+     * @deprecated use custom class for media-component
+     */
+    disableShadow?: boolean;
+}
 export {};

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

@@ -646,9 +646,9 @@ export declare const cardSchemas: {
             };
             background: {
                 oneOf: (({
+                    required: string[];
                     type: string;
                     additionalProperties: boolean;
-                    required: string[];
                     properties: {
                         src: {
                             type: string;
@@ -1530,20 +1530,10 @@ export declare const cardSchemas: {
                         type: string;
                     };
                     height: {
-                        oneOf: ({
-                            type: string;
-                            enum?: undefined;
-                        } | {
-                            type: string;
-                            enum: string[];
-                        })[];
-                    };
-                    width: {
                         type: string;
                     };
-                    justifyContent: {
+                    width: {
                         type: string;
-                        enum: string[];
                     };
                 };
             };

package/build/cjs/schema/validators/common.d.ts

@@ -1388,20 +1388,10 @@ export declare const MediaProps: {
                 type: string;
             };
             height: {
-                oneOf: ({
-                    type: string;
-                    enum?: undefined;
-                } | {
-                    type: string;
-                    enum: string[];
-                })[];
-            };
-            width: {
                 type: string;
             };
-            justifyContent: {
+            width: {
                 type: string;
-                enum: string[];
             };
         };
     };
@@ -1509,6 +1499,10 @@ export declare const MapProps: {
         };
     };
 };
+export declare const BorderProps: {
+    type: string;
+    enum: string[];
+};
 export declare const CardBase: {
     border: {
         type: string;

package/build/cjs/schema/validators/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockHeaderProps = exports.CardBase = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
+exports.BlockHeaderProps = exports.CardBase = exports.BorderProps = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
 const schema_1 = require("../../components/Image/schema");
 const models_1 = require("../../models");
 const event_1 = require("./event");
@@ -526,15 +526,11 @@ const IframeProps = {
             type: 'string',
         },
         height: {
-            oneOf: [{ type: 'number' }, { type: 'string', enum: ['auto'] }],
+            type: 'number',
         },
         width: {
             type: 'number',
         },
-        justifyContent: {
-            type: 'string',
-            enum: ['left', 'right', 'center'],
-        },
     },
 };
 exports.MediaProps = {
@@ -623,11 +619,12 @@ exports.MapProps = {
         items: exports.YMapMarker,
     },
 };
+exports.BorderProps = {
+    type: 'string',
+    enum: ['line', 'shadow', 'none'],
+};
 exports.CardBase = {
-    border: {
-        type: 'string',
-        enum: ['line', 'shadow', 'none'],
-    },
+    border: exports.BorderProps,
 };
 exports.BlockHeaderProps = {
     title: {

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

@@ -11,9 +11,9 @@ export declare const BackgroundCard: {
             };
             background: {
                 oneOf: (({
+                    required: string[];
                     type: string;
                     additionalProperties: boolean;
-                    required: string[];
                     properties: {
                         src: {
                             type: string;

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

@@ -261,20 +261,10 @@ export declare const LayoutItem: {
                         type: string;
                     };
                     height: {
-                        oneOf: ({
-                            type: string;
-                            enum?: undefined;
-                        } | {
-                            type: string;
-                            enum: string[];
-                        })[];
-                    };
-                    width: {
                         type: string;
                     };
-                    justifyContent: {
+                    width: {
                         type: string;
-                        enum: string[];
                     };
                 };
             };

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

@@ -266,20 +266,10 @@ export declare const MediaCardBlock: {
                         type: string;
                     };
                     height: {
-                        oneOf: ({
-                            type: string;
-                            enum?: undefined;
-                        } | {
-                            type: string;
-                            enum: string[];
-                        })[];
-                    };
-                    width: {
                         type: string;
                     };
-                    justifyContent: {
+                    width: {
                         type: string;
-                        enum: string[];
                     };
                 };
             };

package/build/cjs/utils/borderSelector.d.ts

@@ -0,0 +1,7 @@
+import { MediaBorder } from '../models';
+type GetMediaBorderArgs = {
+    border?: MediaBorder;
+    disableShadow?: boolean;
+};
+export declare const getMediaBorder: ({ border, disableShadow }: GetMediaBorderArgs) => MediaBorder;
+export {};

package/build/cjs/utils/borderSelector.js

@@ -0,0 +1,18 @@
+"use strict";
+// This is a crutch
+// The crutch is created in order to help us to work with sites, which use
+// "disableShadow" flag in their content.
+// We have deprecated the flag.
+// We have to remove it after deleting of "disableShadow" and migration of projects content
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMediaBorder = void 0;
+const getMediaBorder = ({ border, disableShadow }) => {
+    if (border) {
+        return border;
+    }
+    if (disableShadow) {
+        return 'none';
+    }
+    return 'shadow';
+};
+exports.getMediaBorder = getMediaBorder;

package/build/esm/blocks/CardLayout/CardLayout.css

@@ -1,3 +1,7 @@
+.pc-card-layout-block__image_border_shadow {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-card-layout-block__item {
@@ -16,12 +20,15 @@ unpredictable css rules order in build */
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 40px;
+  border-radius: 32px;
 }
 .pc-card-layout-block__image img {
   object-fit: cover;
   object-position: left;
 }
+.pc-card-layout-block__image_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
 @media (min-width: 769px) {
   .pc-card-layout-block.pc-AnimateBlock .pc-card-layout-block__item, .pc-AnimateBlock .pc-card-layout-block .pc-card-layout-block__item {
     position: relative;
@@ -63,4 +70,274 @@ unpredictable css rules order in build */
   .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(9), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(9) {
     transition-delay: 0.9s;
   }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(10), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(10) {
+    transition-delay: 1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(11), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(11) {
+    transition-delay: 1.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(12), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(12) {
+    transition-delay: 1.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(13), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(13) {
+    transition-delay: 1.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(14), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(14) {
+    transition-delay: 1.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(15), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(15) {
+    transition-delay: 1.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(16), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(16) {
+    transition-delay: 1.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(17), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(17) {
+    transition-delay: 1.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(18), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(18) {
+    transition-delay: 1.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(19), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(19) {
+    transition-delay: 1.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(20), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(20) {
+    transition-delay: 2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(21), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(21) {
+    transition-delay: 2.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(22), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(22) {
+    transition-delay: 2.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(23), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(23) {
+    transition-delay: 2.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(24), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(24) {
+    transition-delay: 2.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(25), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(25) {
+    transition-delay: 2.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(26), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(26) {
+    transition-delay: 2.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(27), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(27) {
+    transition-delay: 2.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(28), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(28) {
+    transition-delay: 2.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(29), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(29) {
+    transition-delay: 2.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(30), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(30) {
+    transition-delay: 3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(31), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(31) {
+    transition-delay: 3.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(32), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(32) {
+    transition-delay: 3.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(33), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(33) {
+    transition-delay: 3.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(34), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(34) {
+    transition-delay: 3.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(35), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(35) {
+    transition-delay: 3.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(36), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(36) {
+    transition-delay: 3.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(37), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(37) {
+    transition-delay: 3.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(38), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(38) {
+    transition-delay: 3.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(39), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(39) {
+    transition-delay: 3.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(40), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(40) {
+    transition-delay: 4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(41), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(41) {
+    transition-delay: 4.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(42), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(42) {
+    transition-delay: 4.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(43), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(43) {
+    transition-delay: 4.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(44), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(44) {
+    transition-delay: 4.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(45), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(45) {
+    transition-delay: 4.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(46), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(46) {
+    transition-delay: 4.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(47), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(47) {
+    transition-delay: 4.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(48), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(48) {
+    transition-delay: 4.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(49), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(49) {
+    transition-delay: 4.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(50), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(50) {
+    transition-delay: 5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(51), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(51) {
+    transition-delay: 5.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(52), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(52) {
+    transition-delay: 5.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(53), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(53) {
+    transition-delay: 5.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(54), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(54) {
+    transition-delay: 5.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(55), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(55) {
+    transition-delay: 5.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(56), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(56) {
+    transition-delay: 5.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(57), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(57) {
+    transition-delay: 5.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(58), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(58) {
+    transition-delay: 5.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(59), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(59) {
+    transition-delay: 5.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(60), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(60) {
+    transition-delay: 6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(61), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(61) {
+    transition-delay: 6.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(62), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(62) {
+    transition-delay: 6.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(63), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(63) {
+    transition-delay: 6.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(64), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(64) {
+    transition-delay: 6.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(65), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(65) {
+    transition-delay: 6.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(66), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(66) {
+    transition-delay: 6.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(67), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(67) {
+    transition-delay: 6.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(68), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(68) {
+    transition-delay: 6.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(69), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(69) {
+    transition-delay: 6.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(70), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(70) {
+    transition-delay: 7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(71), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(71) {
+    transition-delay: 7.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(72), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(72) {
+    transition-delay: 7.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(73), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(73) {
+    transition-delay: 7.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(74), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(74) {
+    transition-delay: 7.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(75), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(75) {
+    transition-delay: 7.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(76), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(76) {
+    transition-delay: 7.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(77), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(77) {
+    transition-delay: 7.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(78), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(78) {
+    transition-delay: 7.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(79), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(79) {
+    transition-delay: 7.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(80), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(80) {
+    transition-delay: 8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(81), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(81) {
+    transition-delay: 8.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(82), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(82) {
+    transition-delay: 8.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(83), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(83) {
+    transition-delay: 8.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(84), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(84) {
+    transition-delay: 8.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(85), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(85) {
+    transition-delay: 8.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(86), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(86) {
+    transition-delay: 8.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(87), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(87) {
+    transition-delay: 8.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(88), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(88) {
+    transition-delay: 8.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(89), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(89) {
+    transition-delay: 8.9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(90), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(90) {
+    transition-delay: 9s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(91), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(91) {
+    transition-delay: 9.1s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(92), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(92) {
+    transition-delay: 9.2s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(93), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(93) {
+    transition-delay: 9.3s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(94), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(94) {
+    transition-delay: 9.4s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(95), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(95) {
+    transition-delay: 9.5s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(96), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(96) {
+    transition-delay: 9.6s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(97), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(97) {
+    transition-delay: 9.7s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(98), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(98) {
+    transition-delay: 9.8s;
+  }
+  .pc-card-layout-block.pc-AnimateBlock.animate .pc-card-layout-block__item:nth-child(99), .pc-AnimateBlock .pc-card-layout-block.animate .pc-card-layout-block__item:nth-child(99) {
+    transition-delay: 9.9s;
+  }
 }

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { AnimateBlock, BackgroundImage, Title } from '../../components';
@@ -11,12 +12,13 @@ const DEFAULT_SIZES = {
 };
 const b = block('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
+    const _a = background || {}, { border } = _a, backgroundImageProps = __rest(_a, ["border"]);
     return (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
         (title || description) && (React.createElement(Title, { title: title, subtitle: description, className: titleClassName })),
         React.createElement("div", { className: b('content', {
                 'with-background': !isEmpty(background),
             }) },
-            React.createElement(BackgroundImage, Object.assign({ className: b('image') }, background)),
+            React.createElement(BackgroundImage, Object.assign({ className: b('image', { border }) }, backgroundImageProps)),
             React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child)))))));
 };
 export default CardLayout;