@meduza/ui-kit-2 0.1.19 → 0.1.21

package/dist/Cover/Cover.types.d.ts

@@ -1,4 +1,24 @@
+import { OptimizedImageItem } from '../types';
 export interface CoverProps {
-    block: any;
+    block: {
+        only_on?: string;
+        data: {
+            blocks: any;
+            cover: {
+                credit?: string;
+                caption?: string;
+                cc: string;
+                urls: {
+                    w325: OptimizedImageItem;
+                    w600: OptimizedImageItem;
+                };
+                mobile_ratio: number;
+                gradients: {
+                    text_rgb: string;
+                    bg_rgb: string;
+                };
+            };
+        };
+    };
     styleContext?: string[] | string;
 }

package/dist/DotsOnImage/DotsOnImage.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { OptimizedImageItem } from '../Image/Image.types';
+import { OptimizedImageItem } from '../types';
 export interface PopoverData {
     title?: string;
     body?: string;

package/dist/Image/Image.types.d.ts

@@ -1,9 +1,4 @@
-export interface OptimizedImageItem {
-    '1x': string;
-    '2x': string;
-    '1x_webp': string;
-    '2x_webp': string;
-}
+import { OptimizedImageItem } from '../types';
 export interface ImageProps {
     alt?: string;
     display?: string;

package/dist/ListBlock/ListBlock.stories.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { ListBlockProps } from './ListBlock.types';
 declare const _default: {
     title: string;
-    component: React.FC<import("./ListBlock.types").ListBlockProps>;
+    component: React.FC<ListBlockProps>;
     parameters: {
         themeWrapperSideBySide: boolean;
     };

package/dist/ListBlock/ListBlock.types.d.ts

@@ -1,4 +1,10 @@
+/// <reference types="react" />
 export interface ListBlockProps {
-    block: any;
+    block: {
+        type: keyof JSX.IntrinsicElements;
+        data: string[];
+        length: number;
+        only_on?: string;
+    };
     styleContext?: string[] | string;
 }

package/dist/RelatedBlock/RelatedBlock.types.d.ts

@@ -1,4 +1,17 @@
 export interface RelatedBlockProps {
-    block: any;
+    block: {
+        data: {
+            title: string;
+            related: {
+                title: string;
+                second_title?: string;
+                layout: string;
+                url?: string;
+                full_url?: string;
+                id: string;
+            }[];
+        };
+        only_on?: string;
+    };
     styleContext?: string[] | string;
 }

package/dist/RelatedRichBlock/RelatedRichBlock.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("./RelatedRichBlock.types").RelatedRichBlockProps>;
+    parameters: {
+        themeWrapperSideBySide: boolean;
+    };
+};
+export default _default;
+export declare const Default: React.FC;

package/dist/RelatedRichBlock/RelatedRichBlock.types.d.ts

@@ -0,0 +1,4 @@
+export interface RelatedRichBlockProps {
+    block?: any;
+    styleContext?: any;
+}

package/dist/RelatedRichBlock/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RelatedRichBlockProps } from './RelatedRichBlock.types';
+export declare const RelatedRichBlock: React.FC<RelatedRichBlockProps>;

package/dist/RichTitle/RichTitle.types.d.ts

@@ -1,4 +1,11 @@
 export interface RichTitleProps {
-    block: any;
+    block: {
+        only_on?: string;
+        data: {
+            featured?: boolean;
+            first: string;
+            second?: string;
+        };
+    };
     styleContext?: string[] | string;
 }

package/dist/SimpleTitle/SimpleTitle.types.d.ts

@@ -1,4 +1,9 @@
 export interface SimpleTitleProps {
-    block: any;
+    block: {
+        data: {
+            first: string;
+        };
+        only_on?: string;
+    };
     styleContext?: string[] | string;
 }

package/dist/SourceBlock/SourceBlock.types.d.ts

@@ -1,4 +1,15 @@
 export interface SourceBlockProps {
-    block: any;
+    block: {
+        only_on?: string;
+        data: {
+            quote: {
+                type: string;
+                data: string;
+                length: number;
+            }[];
+            origin: string;
+            url: string;
+        };
+    };
     styleContext?: string[] | string;
 }

package/dist/index.d.ts

@@ -37,3 +37,4 @@ export * from './MetaItemLive';
 export * from './DocumentItemsCount';
 export * from './ToolbarButton';
 export * from './Footnote';
+export * from './RelatedRichBlock';

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export interface OptimizedImageItem {
+    '1x': string;
+    '2x': string;
+    '1x_webp': string;
+    '2x_webp': string;
+}

package/dist/ui-kit-2.cjs.development.js

@@ -377,6 +377,9 @@ var toCamel = function toCamel(s) {
     return str.toUpperCase().replace('_', '');
   });
 };
+var toCapitalize = function toCapitalize(s) {
+  return s[0].toUpperCase() + s.slice(1);
+};
 
 var RenderPicture = function RenderPicture(_ref) {
   var source = _ref.source,
@@ -1396,7 +1399,7 @@ var EmbedBlockContainer = function EmbedBlockContainer(_ref) {
       styleContext = _ref.styleContext,
       lang = _ref.lang;
 
-  if (block.data.wrap_with_iframe) {
+  if (block.data && block.data.wrap_with_iframe) {
     return React__default.createElement(IframeBlock, {
       block: block,
       styleContext: styleContext,
@@ -1467,9 +1470,12 @@ var ChapterBlock = function ChapterBlock(_ref) {
   }));
 };
 
-var generateGradient = function generateGradient(color) {
-  var gradientSteps = [[0, 7], [0.08, 12], [0.16, 17], [0.22, 21], [0.32, 26], [0.42, 32], [0.52, 38], [0.62, 47], [0.72, 57], [0.82, 65], [1, 82]];
-  var gradient = gradientSteps.map(function (i) {
+var generateGradient = function generateGradient(color, type) {
+  var steps = {
+    mediaBlockBottom: [[0, 7], [0.08, 12], [0.16, 17], [0.22, 21], [0.32, 26], [0.42, 32], [0.52, 38], [0.62, 47], [0.72, 57], [0.82, 65], [1, 82]],
+    mediaBlockTop: [[0.5, 0], [0, 97]]
+  };
+  var gradient = steps[type].map(function (i) {
     return "rgba(" + color + ", " + i[0] + ") " + i[1] + "%";
   });
   return "linear-gradient(-180deg, " + gradient + ")";
@@ -1494,7 +1500,7 @@ var SimpleTitle = function SimpleTitle(_ref) {
   }, first);
 };
 
-var styles$n = {"root":"RichTitle-module_root__BK_WT","slide":"RichTitle-module_slide__1A-gB","game":"RichTitle-module_game__1g8Bn","half":"RichTitle-module_half__10GRI","featured":"RichTitle-module_featured__wJfaQ","mobile":"RichTitle-module_mobile__1Cb6E","desktop":"RichTitle-module_desktop__2ixSQ"};
+var styles$n = {"root":"RichTitle-module_root__BK_WT","slide":"RichTitle-module_slide__1A-gB","game":"RichTitle-module_game__1g8Bn","half":"RichTitle-module_half__10GRI","featured":"RichTitle-module_featured__wJfaQ","isInMediaBlock":"RichTitle-module_isInMediaBlock__3RDw4","mobile":"RichTitle-module_mobile__1Cb6E","desktop":"RichTitle-module_desktop__2ixSQ"};
 
 var RichTitle = function RichTitle(_ref) {
   var _ref$block = _ref.block,
@@ -1575,7 +1581,8 @@ var ListBlock = function ListBlock(_ref) {
   }
 
   return React__default.createElement(TagName, {
-    className: makeClassName(classNames)
+    className: makeClassName(classNames),
+    "data-testid": "list-block"
   }, data.map(function (item, index) {
     return React__default.createElement("li", {
       key: index,
@@ -1659,7 +1666,91 @@ var SourceBlock = function SourceBlock(_ref) {
   }, origin))));
 };
 
-var styles$s = {"root":"GroupedBlock-module_root__2qfQA","hasFigcaption":"GroupedBlock-module_hasFigcaption__2_mcf","item":"GroupedBlock-module_item__3sz9_","items":"GroupedBlock-module_items__2DV2X","figcaption":"GroupedBlock-module_figcaption__2Q_wf","default":"GroupedBlock-module_default__3ylw_","full":"GroupedBlock-module_full__1dzQR","super_full":"GroupedBlock-module_super_full__1PU72","mobile":"GroupedBlock-module_mobile__3n8Ub","desktop":"GroupedBlock-module_desktop__6ZRpA"};
+var styles$s = {"root":"RelatedRichBlock-module_root__3NYmj","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","isRich":"RelatedRichBlock-module_isRich__1LnA4","body":"RelatedRichBlock-module_body__1ZHZS","isCard":"RelatedRichBlock-module_isCard__2naDz","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","dark":"RelatedRichBlock-module_dark__3Y1fE","light":"RelatedRichBlock-module_light__2mUxL","mobile":"RelatedRichBlock-module_mobile__JpCS4","desktop":"RelatedRichBlock-module_desktop__trL0D"};
+
+/* eslint-disable react/jsx-no-target-blank */
+var RelatedRichBlock = function RelatedRichBlock(_ref) {
+  var _ref$block = _ref.block,
+      onlyOn = _ref$block.only_on,
+      _ref$block$data = _ref$block.data,
+      blocks = _ref$block$data.blocks,
+      fallback = _ref$block$data.fallback,
+      url = _ref$block$data.url,
+      _ref$block$data$cover = _ref$block$data.cover,
+      urls = _ref$block$data$cover.urls,
+      gradients = _ref$block$data$cover.gradients,
+      tag = _ref$block$data$cover.tag,
+      layout = _ref$block$data$cover.layout,
+      ratio = _ref$block$data$cover.ratio,
+      styleContext = _ref.styleContext;
+  var style = {};
+  var styleHeader = {};
+
+  var _useState = React.useState(false),
+      isRich = _useState[0],
+      setIsRich = _useState[1];
+
+  var cardType = "is" + toCapitalize(layout);
+  React.useEffect(function () {
+    // setIsRich(Math.random() >= 0.5)
+    setIsRich(true);
+  }, []);
+  var classNames = [[styles$s.root, true], [styles$s[cardType], !!layout && !!styles$s[cardType]], [styles$s.hasGradient, !!gradients], [styles$s[onlyOn], !!onlyOn && !!styles$s[onlyOn]]];
+  var context = ['isInMediaBlock'];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$s);
+    context = [].concat(styleContext, ['isInMediaBlock']);
+  }
+
+  if (gradients) {
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$s);
+    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+  }
+
+  if (!isRich) {
+    return React__default.createElement(RelatedBlock, {
+      block: fallback
+    });
+  }
+
+  return React__default.createElement("a", {
+    "data-testid": "related-rich-block",
+    className: makeClassName(classNames),
+    href: url,
+    target: "_blank"
+  }, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$s.overlay,
+    style: style
+  }), React__default.createElement("div", {
+    className: styles$s.overlayHeader,
+    style: styleHeader
+  })), React__default.createElement("div", {
+    className: styles$s.tag
+  }, React__default.createElement(Tag, {
+    size: "small",
+    theme: "inherit",
+    styleContext: "rich"
+  }, tag)), React__default.createElement("div", {
+    className: styles$s.cover
+  }, React__default.createElement(Image, {
+    optimized: urls,
+    ratio: ratio,
+    display: "narrow"
+  })), React__default.createElement("div", {
+    className: styles$s.body
+  }, blocks.map(function (item) {
+    return React__default.createElement(RenderBlocks, {
+      key: item.id,
+      block: item,
+      styleContext: context
+    });
+  })));
+};
+
+var styles$t = {"root":"GroupedBlock-module_root__2qfQA","hasFigcaption":"GroupedBlock-module_hasFigcaption__2_mcf","item":"GroupedBlock-module_item__3sz9_","items":"GroupedBlock-module_items__2DV2X","figcaption":"GroupedBlock-module_figcaption__2Q_wf","default":"GroupedBlock-module_default__3ylw_","full":"GroupedBlock-module_full__1dzQR","super_full":"GroupedBlock-module_super_full__1PU72","mobile":"GroupedBlock-module_mobile__3n8Ub","desktop":"GroupedBlock-module_desktop__6ZRpA"};
 
 var GroupedBlock = function GroupedBlock(_ref) {
   var block = _ref.block,
@@ -1674,21 +1765,21 @@ var GroupedBlock = function GroupedBlock(_ref) {
   var sumWidth = normalizedBoxesWidth.reduce(function (sum, x) {
     return sum + x;
   });
-  var classNames = [[styles$s.root, true], [styles$s[onlyOn], true], [styles$s.hasFigcaption, block.cc === 'default'], [styles$s[block.display], !!block.display && styles$s[block.display]]];
+  var classNames = [[styles$t.root, true], [styles$t[onlyOn], true], [styles$t.hasFigcaption, block.cc === 'default'], [styles$t[block.display], !!block.display && styles$t[block.display]]];
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$s);
+    classNames = makeStyleContext(classNames, styleContext, styles$t);
   }
 
   return React__default.createElement("div", {
     "data-testid": "grouped-block",
     className: makeClassName(classNames)
   }, React__default.createElement("div", {
-    className: styles$s.items
+    className: styles$t.items
   }, block.data.map(function (item, index) {
     var percentWidth = normalizedBoxesWidth[index] / sumWidth * 100;
     return React__default.createElement("div", {
-      className: styles$s.item,
+      className: styles$t.item,
       key: item.id,
       style: {
         width: percentWidth + "%"
@@ -1698,7 +1789,7 @@ var GroupedBlock = function GroupedBlock(_ref) {
       styleContext: "isInGroupedBlock"
     }));
   })), block.cc && React__default.createElement("figcaption", {
-    className: styles$s.figcaption
+    className: styles$t.figcaption
   }, React__default.createElement(MediaCaption, {
     credit: block.credit,
     caption: block.caption,
@@ -1706,32 +1797,32 @@ var GroupedBlock = function GroupedBlock(_ref) {
   })));
 };
 
-var styles$t = {"root":"MetaItem-module_root__2VQom","hasBullets":"MetaItem-module_hasBullets__CkQPI","hasSource":"MetaItem-module_hasSource__1DmCI","listened":"MetaItem-module_listened__lwvAO","read":"MetaItem-module_read__5eAIG","datetime":"MetaItem-module_datetime__3tOWm"};
+var styles$u = {"root":"MetaItem-module_root__2VQom","hasBullets":"MetaItem-module_hasBullets__CkQPI","hasSource":"MetaItem-module_hasSource__1DmCI","listened":"MetaItem-module_listened__lwvAO","read":"MetaItem-module_read__5eAIG","datetime":"MetaItem-module_datetime__3tOWm"};
 
 var MetaItem = function MetaItem(_ref) {
   var hasSource = _ref.hasSource,
       type = _ref.type,
       children = _ref.children,
       bullets = _ref.bullets;
-  var classNames = [[styles$t.root, true], [styles$t[type], !!type && !!styles$t[type]], [styles$t.hasSource, !!hasSource], [styles$t.hasBullets, !!bullets]];
+  var classNames = [[styles$u.root, true], [styles$u[type], !!type && !!styles$u[type]], [styles$u.hasSource, !!hasSource], [styles$u.hasBullets, !!bullets]];
   return React__default.createElement("div", {
     "data-testid": "meta-item",
     className: makeClassName(classNames)
   }, children);
 };
 
-var styles$u = {"root":"MetaItemLive-module_root__2mpD3","gold":"MetaItemLive-module_gold__3yZEV","frame":"MetaItemLive-module_frame__1H_Ha","liveMiddle":"MetaItemLive-module_liveMiddle__wyuV3","liveFirstWave":"MetaItemLive-module_liveFirstWave__3dbvz","liveSecondWave":"MetaItemLive-module_liveSecondWave__12g57"};
+var styles$v = {"root":"MetaItemLive-module_root__2mpD3","gold":"MetaItemLive-module_gold__3yZEV","frame":"MetaItemLive-module_frame__1H_Ha","liveMiddle":"MetaItemLive-module_liveMiddle__wyuV3","liveFirstWave":"MetaItemLive-module_liveFirstWave__3dbvz","liveSecondWave":"MetaItemLive-module_liveSecondWave__12g57"};
 
 var MetaItemLive = function MetaItemLive(_ref) {
   var _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'gold' : _ref$theme;
-  var classNames = [[styles$u.root, true], [styles$u[theme], !!theme && styles$u[theme]]];
+  var classNames = [[styles$v.root, true], [styles$v[theme], !!theme && styles$v[theme]]];
   return React__default.createElement("div", {
     "data-testid": "meta-item-live",
     "data-meta": "live",
     className: makeClassName(classNames)
   }, React__default.createElement("div", {
-    className: styles$u.frame
+    className: styles$v.frame
   }));
 };
 
@@ -1756,7 +1847,7 @@ var pluralize = function pluralize(number, one, two, five) {
   return five;
 };
 
-var styles$v = {"root":"DocumentItemsCount-module_root__P3q-z","items":"DocumentItemsCount-module_items__3pfxW"};
+var styles$w = {"root":"DocumentItemsCount-module_root__P3q-z","items":"DocumentItemsCount-module_items__3pfxW"};
 
 var DocumentItemsCount = function DocumentItemsCount(_ref) {
   var type = _ref.type,
@@ -1793,9 +1884,9 @@ var DocumentItemsCount = function DocumentItemsCount(_ref) {
   var itemsCount = items + " " + pluralize(items, i18n[lang][type].one, i18n[lang][type].two, i18n[lang][type].five);
   return React__default.createElement("div", {
     "data-testid": "document-items-count",
-    className: styles$v.root
+    className: styles$w.root
   }, children, React__default.createElement("span", {
-    className: styles$v.items
+    className: styles$w.items
   }, itemsCount));
 };
 
@@ -1998,6 +2089,14 @@ var RenderBlocks = function RenderBlocks(_ref) {
         });
       }
 
+    case 'related_rich':
+      {
+        return React__default.createElement(RelatedRichBlock, {
+          block: block,
+          styleContext: styleContext
+        });
+      }
+
     case 'chapter-subtitle':
       {
         return React__default.createElement(ChapterBlock, {
@@ -2065,7 +2164,7 @@ var RenderBlocks = function RenderBlocks(_ref) {
   }
 };
 
-var styles$w = {"root":"Cover-module_root__18Z8J","body":"Cover-module_body__1xs8e","image":"Cover-module_image__2f3Qc","rich":"Cover-module_rich__1fAGA","dark":"Cover-module_dark__2Ac-w","light":"Cover-module_light__FUp5X","control":"Cover-module_control__VXbhi","isInDynamicBlock":"Cover-module_isInDynamicBlock__3eghb","mobile":"Cover-module_mobile__5DKa1","desktop":"Cover-module_desktop__2mrOc"};
+var styles$x = {"root":"Cover-module_root__18Z8J","body":"Cover-module_body__1xs8e","image":"Cover-module_image__2f3Qc","rich":"Cover-module_rich__1fAGA","dark":"Cover-module_dark__2Ac-w","light":"Cover-module_light__FUp5X","control":"Cover-module_control__VXbhi","isInDynamicBlock":"Cover-module_isInDynamicBlock__3eghb","mobile":"Cover-module_mobile__5DKa1","desktop":"Cover-module_desktop__2mrOc"};
 
 var Cover = function Cover(_ref) {
   var _ref$block = _ref.block,
@@ -2086,16 +2185,16 @@ var Cover = function Cover(_ref) {
       setIsPopoverShown = _useState[1];
 
   var style = {};
-  var classNames = [[styles$w.root, true], [styles$w[onlyOn], !!onlyOn && !!styles$w[onlyOn]]];
+  var classNames = [[styles$x.root, true], [styles$x[onlyOn], !!onlyOn && !!styles$x[onlyOn]]];
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$w);
+    classNames = makeStyleContext(classNames, styleContext, styles$x);
   }
 
   if (gradients) {
     var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
-    classNames = makeStyleContext(classNames, theme, styles$w);
-    style.backgroundImage = generateGradient(gradients.bg_rgb);
+    classNames = makeStyleContext(classNames, theme, styles$x);
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
   }
 
   var renderCC = function renderCC(context) {
@@ -2110,13 +2209,13 @@ var Cover = function Cover(_ref) {
     "data-testid": "cover",
     className: makeClassName(classNames)
   }, React__default.createElement("div", {
-    className: styles$w.image
+    className: styles$x.image
   }, React__default.createElement(Image, {
     optimized: urls,
     ratio: mobileRatio,
     display: "narrow"
   })), React__default.createElement("div", {
-    className: styles$w.body,
+    className: styles$x.body,
     style: style
   }, blocks.map(function (item) {
     return React__default.createElement(RenderBlocks, {
@@ -2125,7 +2224,7 @@ var Cover = function Cover(_ref) {
       styleContext: styleContext
     });
   })), cc === 'button' && React__default.createElement("button", {
-    className: styles$w.control,
+    className: styles$x.control,
     type: "button",
     "aria-label": "Open",
     onClick: function onClick() {
@@ -2138,7 +2237,7 @@ var Cover = function Cover(_ref) {
   }, renderCC('isInPopover')));
 };
 
-var styles$x = {"root":"HalfBlock-module_root__2frv2","main":"HalfBlock-module_main__2XX73","body":"HalfBlock-module_body__3MnEN","footer":"HalfBlock-module_footer__1C0yp","image":"HalfBlock-module_image__2lYel","mobile":"HalfBlock-module_mobile__2latf","desktop":"HalfBlock-module_desktop__3B1Ej"};
+var styles$y = {"root":"HalfBlock-module_root__2frv2","main":"HalfBlock-module_main__2XX73","body":"HalfBlock-module_body__3MnEN","footer":"HalfBlock-module_footer__1C0yp","image":"HalfBlock-module_image__2lYel","mobile":"HalfBlock-module_mobile__2latf","desktop":"HalfBlock-module_desktop__3B1Ej"};
 
 var HalfBlock = function HalfBlock(_ref) {
   var _ref$block = _ref.block,
@@ -2150,25 +2249,25 @@ var HalfBlock = function HalfBlock(_ref) {
       credit = _ref$block$data$cover.credit,
       caption = _ref$block$data$cover.caption,
       styleContext = _ref.styleContext;
-  var classNames = [[styles$x.root, true], [styles$x[onlyOn], true]];
+  var classNames = [[styles$y.root, true], [styles$y[onlyOn], true]];
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$x);
+    classNames = makeStyleContext(classNames, styleContext, styles$y);
   }
 
   return React__default.createElement("div", {
     "data-testid": "half-block",
     className: makeClassName(classNames)
   }, React__default.createElement("div", {
-    className: styles$x.main
+    className: styles$y.main
   }, React__default.createElement("div", {
-    className: styles$x.image
+    className: styles$y.image
   }, React__default.createElement(Image, {
     optimized: optimized,
     ratio: ratio,
     display: "super_full"
   })), React__default.createElement("div", {
-    className: styles$x.body
+    className: styles$y.body
   }, data.blocks.map(function (item) {
     return React__default.createElement(RenderBlocks, {
       key: item.id,
@@ -2176,7 +2275,7 @@ var HalfBlock = function HalfBlock(_ref) {
       styleContext: ['rich']
     });
   }))), React__default.createElement("div", {
-    className: styles$x.footer
+    className: styles$y.footer
   }, React__default.createElement(MediaCaption, {
     credit: credit,
     caption: caption,
@@ -2184,17 +2283,17 @@ var HalfBlock = function HalfBlock(_ref) {
   })));
 };
 
-var styles$y = {"root":"ImportantLead-module_root__2BdT3","slide":"ImportantLead-module_slide__3kQ9x","mobile":"ImportantLead-module_mobile__3BXbm","desktop":"ImportantLead-module_desktop__3Zljc"};
+var styles$z = {"root":"ImportantLead-module_root__2BdT3","slide":"ImportantLead-module_slide__3kQ9x","mobile":"ImportantLead-module_mobile__3BXbm","desktop":"ImportantLead-module_desktop__3Zljc"};
 
 var ImportantLead = function ImportantLead(_ref) {
   var _ref$block = _ref.block,
       onlyOn = _ref$block.only_on,
       data = _ref$block.data,
       styleContext = _ref.styleContext;
-  var classNames = [[styles$y.root, true], [styles$y[onlyOn], !!onlyOn]];
+  var classNames = [[styles$z.root, true], [styles$z[onlyOn], !!onlyOn]];
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$y);
+    classNames = makeStyleContext(classNames, styleContext, styles$z);
   }
 
   return React__default.createElement("div", {
@@ -2209,7 +2308,7 @@ var ImportantLead = function ImportantLead(_ref) {
   }));
 };
 
-var styles$z = {"root":"Spoiler-module_root__1OfSR","header":"Spoiler-module_header__1rZUs","body":"Spoiler-module_body__Q1e_c","spoiled":"Spoiler-module_spoiled__1A5r4","footer":"Spoiler-module_footer__23mh7","spoilerSticky":"Spoiler-module_spoilerSticky__3Kd30","spoilerStickyBg":"Spoiler-module_spoilerStickyBg__nYdlo","center":"Spoiler-module_center__tq1m0","full":"Spoiler-module_full__1QFqR","default":"Spoiler-module_default__2Kjx8","mobile":"Spoiler-module_mobile__2BPt8","desktop":"Spoiler-module_desktop__1BIFJ"};
+var styles$A = {"root":"Spoiler-module_root__1OfSR","header":"Spoiler-module_header__1rZUs","body":"Spoiler-module_body__Q1e_c","spoiled":"Spoiler-module_spoiled__1A5r4","footer":"Spoiler-module_footer__23mh7","spoilerSticky":"Spoiler-module_spoilerSticky__3Kd30","spoilerStickyBg":"Spoiler-module_spoilerStickyBg__nYdlo","center":"Spoiler-module_center__tq1m0","full":"Spoiler-module_full__1QFqR","default":"Spoiler-module_default__2Kjx8","mobile":"Spoiler-module_mobile__2BPt8","desktop":"Spoiler-module_desktop__1BIFJ"};
 
 var Spoiler = function Spoiler(_ref) {
   var _ref$block = _ref.block,
@@ -2244,10 +2343,10 @@ var Spoiler = function Spoiler(_ref) {
     }
   };
 
-  var classNames = [[styles$z.root, true], [styles$z[onlyOn], !!onlyOn], [styles$z[display], !!display && styles$z[display]], [[styles$z.spoiled], !!spoiled]];
+  var classNames = [[styles$A.root, true], [styles$A[onlyOn], !!onlyOn], [styles$A[display], !!display && styles$A[display]], [[styles$A.spoiled], !!spoiled]];
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$z);
+    classNames = makeStyleContext(classNames, styleContext, styles$A);
   }
 
   var buttonCollapse = button ? button.collapse : 'Свернуть';
@@ -2257,9 +2356,9 @@ var Spoiler = function Spoiler(_ref) {
     className: makeClassName(classNames),
     "data-testid": "spoiler"
   }, React__default.createElement("div", {
-    className: styles$z.header
+    className: styles$A.header
   }, title && React__default.createElement("h3", null, title)), React__default.createElement("div", {
-    className: styles$z.body
+    className: styles$A.body
   }, blocks.map(function (item) {
     return React__default.createElement(RenderBlocks, {
       key: item.id,
@@ -2267,7 +2366,7 @@ var Spoiler = function Spoiler(_ref) {
       styleContext: styleContext
     });
   })), React__default.createElement("div", {
-    className: styles$z.footer
+    className: styles$A.footer
   }, React__default.createElement(Button, {
     size: "default",
     theme: "gray",
@@ -2343,7 +2442,7 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
   }
 };
 
-var styles$A = {"root":"ToolbarButton-module_root__xN-fq","dark":"ToolbarButton-module_dark__GrIOr","bookmark":"ToolbarButton-module_bookmark__3369b","isActive":"ToolbarButton-module_isActive__3NLAE","text":"ToolbarButton-module_text__32m6s"};
+var styles$B = {"root":"ToolbarButton-module_root__xN-fq","dark":"ToolbarButton-module_dark__GrIOr","bookmark":"ToolbarButton-module_bookmark__3369b","isActive":"ToolbarButton-module_isActive__3NLAE","text":"ToolbarButton-module_text__32m6s"};
 
 var ToolbarButton = function ToolbarButton(_ref) {
   var children = _ref.children,
@@ -2351,7 +2450,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
       theme = _ref.theme,
       isActive = _ref.isActive,
       _onClick = _ref.onClick;
-  var classNames = [[styles$A.root, true], [styles$A[type], !!styles$A[type]], [styles$A[theme], !!styles$A[theme] && !!theme], [styles$A.isActive, !!isActive]];
+  var classNames = [[styles$B.root, true], [styles$B[type], !!styles$B[type]], [styles$B[theme], !!styles$B[theme] && !!theme], [styles$B.isActive, !!isActive]];
   return React__default.createElement("button", {
     "data-testid": "toolbar-button",
     className: makeClassName(classNames),
@@ -2364,7 +2463,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
     icon: type,
     styleContext: "isInToolbar"
   }), children && React__default.createElement("span", {
-    className: styles$A.text
+    className: styles$B.text
   }, children));
 };
 
@@ -2396,6 +2495,7 @@ exports.Primary = Primary;
 exports.QuoteBlock = QuoteBlock;
 exports.RawHtmlBlock = RawHtmlBlock;
 exports.RelatedBlock = RelatedBlock;
+exports.RelatedRichBlock = RelatedRichBlock;
 exports.RenderBlocks = RenderBlocks;
 exports.RichTitle = RichTitle;
 exports.Secondary = Secondary;