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

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor/)
+# @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/page-constructor/)
 
 ## Page constructor
 
@@ -6,7 +6,7 @@
 
 When creating pages, component-based approach is used: a page is built using a set of ready-made blocks that can be placed in any order. Each block has a certain type and set of input data parameters.
 
-For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/docs/documentation-blocks--docs).
+For the format of input data and list of available blocks, see the [documentation](https://preview.gravity-ui.com/page-constructor/?path=/docs/documentation-blocks--docs).
 
 ## Install
 

package/build/cjs/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/cjs/blocks/CardLayout/CardLayout.js

@@ -13,12 +13,13 @@ const DEFAULT_SIZES = {
 };
 const b = (0, utils_1.block)('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
+    const _a = background || {}, { border } = _a, backgroundImageProps = tslib_1.__rest(_a, ["border"]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
         (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
         react_1.default.createElement("div", { className: b('content', {
                 'with-background': !(0, isEmpty_1.default)(background),
             }) },
-            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, background)),
+            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image', { border }) }, backgroundImageProps)),
             react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child)))))));
 };
 exports.default = CardLayout;

package/build/cjs/blocks/CardLayout/schema.d.ts

@@ -8,41 +8,77 @@ export declare const CardLayoutProps: {
             properties: {};
         };
         background: {
-            type: string;
-            additionalProperties: boolean;
-            required: string[];
-            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;
+            anyOf: ({
+                properties: {
+                    border: {
+                        type: string;
+                        enum: string[];
+                    };
+                    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;
+                    };
                 };
-                alt: {
-                    type: string;
-                    contentType: string;
-                };
-                disableCompress: {
-                    type: string;
+                optionName: string;
+                type: string;
+                additionalProperties: boolean;
+            } | {
+                properties: {
+                    border: {
+                        type: string;
+                        enum: string[];
+                    };
+                    desktop: {
+                        type: string;
+                        pattern: string;
+                    };
+                    tablet: {
+                        type: string;
+                        pattern: string;
+                    };
+                    mobile: {
+                        type: string;
+                        pattern: string;
+                    };
+                    alt: {
+                        type: string;
+                        contentType: string;
+                    };
+                    disableCompress: {
+                        type: string;
+                    };
                 };
-            };
+                optionName: string;
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+            })[];
         };
         children: {
             type: string;
@@ -144,41 +180,77 @@ export declare const CardLayoutBlock: {
                 properties: {};
             };
             background: {
-                type: string;
-                additionalProperties: boolean;
-                required: string[];
-                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;
+                anyOf: ({
+                    properties: {
+                        border: {
+                            type: string;
+                            enum: string[];
+                        };
+                        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;
+                        };
                     };
-                    alt: {
-                        type: string;
-                        contentType: string;
-                    };
-                    disableCompress: {
-                        type: string;
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                } | {
+                    properties: {
+                        border: {
+                            type: string;
+                            enum: string[];
+                        };
+                        desktop: {
+                            type: string;
+                            pattern: string;
+                        };
+                        tablet: {
+                            type: string;
+                            pattern: string;
+                        };
+                        mobile: {
+                            type: string;
+                            pattern: string;
+                        };
+                        alt: {
+                            type: string;
+                            contentType: string;
+                        };
+                        disableCompress: {
+                            type: string;
+                        };
                     };
-                };
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                })[];
             };
             children: {
                 type: string;

package/build/cjs/blocks/CardLayout/schema.js

@@ -6,7 +6,12 @@ const common_1 = require("../../schema/validators/common");
 exports.CardLayoutProps = {
     additionalProperties: false,
     required: [],
-    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { colSizes: common_1.containerSizesObject, background: schema_1.ImageObjectProps, children: common_1.ChildrenCardsProps }),
+    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { colSizes: common_1.containerSizesObject, background: {
+            anyOf: [
+                Object.assign(Object.assign({}, schema_1.ImageBaseObjectProps), { properties: Object.assign(Object.assign({}, schema_1.ImageBaseObjectProps.properties), { border: common_1.BorderProps }), optionName: 'options' }),
+                Object.assign(Object.assign({}, schema_1.ImageDeviceProps), { properties: Object.assign(Object.assign({}, schema_1.ImageDeviceProps.properties), { border: common_1.BorderProps }), optionName: 'device options' }),
+            ],
+        }, children: common_1.ChildrenCardsProps }),
 };
 exports.CardLayoutBlock = {
     'card-layout-block': exports.CardLayoutProps,