@meduza/ui-kit-2 0.1.37 → 0.1.39

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

@@ -33,4 +33,5 @@ export interface PictureProps {
     alt?: string;
     fallbackSource: string;
     display: string;
+    onLoad: (boolean: any) => void;
 }

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

@@ -13,6 +13,5 @@ export interface RelatedBlockProps {
         };
         only_on?: string;
     };
-    trackClick?: boolean;
     styleContext?: string[] | string;
 }

package/dist/SensitiveBlock/SensitiveBlock.stories.d.ts

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

package/dist/SensitiveBlock/SensitiveBlock.types.d.ts

@@ -0,0 +1,15 @@
+export interface SensitiveBlockProps {
+    block: {
+        id: string;
+        title: string;
+        blurred_image: string;
+        button: {
+            text: string;
+        };
+        item: any;
+        credit?: string;
+        caption?: string;
+        cc: string;
+    };
+    styleContext?: string[];
+}

package/dist/SensitiveBlock/index.d.ts

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

package/dist/index.d.ts

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

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

@@ -339,7 +339,7 @@ var imageConditionalKeys = {
   narrow: [600, 325]
 };
 
-var styles$3 = {"root":"Lazy-module_root__2Z72l","visible":"Lazy-module_visible__3-SdX"};
+var styles$3 = {"root":"Lazy-module_root__2Z72l"};
 
 var Lazy = function Lazy(_ref) {
   var children = _ref.children,
@@ -387,7 +387,8 @@ var RenderPicture = function RenderPicture(_ref) {
       fallbackSource = _ref.fallbackSource,
       optimized = _ref.optimized,
       alt = _ref.alt,
-      display = _ref.display;
+      display = _ref.display,
+      _onLoad = _ref.onLoad;
 
   var _useState = React.useState(false),
       fallback = _useState[0],
@@ -423,11 +424,14 @@ var RenderPicture = function RenderPicture(_ref) {
     }));
   }), React__default.createElement("img", {
     src: fallback ? fallbackSource : 'data:image/gif;base64,R0lGODlhAQABAPAAAPLy8gAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
-    alt: alt
+    alt: alt,
+    onLoad: function onLoad() {
+      return _onLoad(true);
+    }
   }));
 };
 
-var styles$4 = {"root":"Image-module_root__1vsA_","placeholder":"Image-module_placeholder__1p4ob","wrapper":"Image-module_wrapper__3fLjs","loaded":"Image-module_loaded__w9FVT","fullscreen":"Image-module_fullscreen__29apx"};
+var styles$4 = {"root":"Image-module_root__1vsA_","isLoaded":"Image-module_isLoaded__3XhU5","wrapper":"Image-module_wrapper__3fLjs","fullscreen":"Image-module_fullscreen__29apx"};
 
 var Image = function Image(_ref) {
   var alt = _ref.alt,
@@ -443,6 +447,10 @@ var Image = function Image(_ref) {
   var _useContext = React.useContext(BlockContext),
       lightBox = _useContext.lightBox;
 
+  var _useState = React.useState(false),
+      isLoaded = _useState[0],
+      setIsLoaded = _useState[1];
+
   var handleClick = function handleClick() {
     if (!fullscreen || !lightBox || optimized && !optimized.original) {
       return;
@@ -462,17 +470,17 @@ var Image = function Image(_ref) {
     lightBox.show(optimized, width, height, alt);
   };
 
-  var pictureStyles = {
-    paddingBottom: 100 / (ratio || width / height) + "%"
-  };
   var blockStyles = {
     maxWidth: width <= 649 ? width : '100%'
   };
+  var pictureStyles = {
+    paddingBottom: 100 / (ratio || width / height) + "%"
+  };
   /* fallback w325 url until w6 was released */
 
   var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
   return React__default.createElement("div", {
-    className: makeClassName([[styles$4.root, true], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
+    className: makeClassName([[styles$4.root, true], [styles$4.isLoaded, !isLoaded], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
     style: blockStyles,
     "data-testid": "image"
   }, React__default.createElement("div", {
@@ -493,7 +501,8 @@ var Image = function Image(_ref) {
     source: source,
     optimized: optimized,
     alt: alt,
-    display: display
+    display: display,
+    onLoad: setIsLoaded
   })), React__default.createElement("noscript", null, React__default.createElement("img", {
     src: fallbackSource,
     alt: alt
@@ -502,7 +511,8 @@ var Image = function Image(_ref) {
     source: source,
     optimized: optimized,
     alt: alt,
-    display: display
+    display: display,
+    onLoad: setIsLoaded
   })));
 };
 
@@ -1142,7 +1152,7 @@ var DangerousHTML = function DangerousHTML(_ref) {
   }));
 };
 
-var styles$i = {"root":"EmbedBlock-module_root__28k9U","object":"EmbedBlock-module_object__2_UZ7","objectWrap":"EmbedBlock-module_objectWrap__1aDVd","proportional":"EmbedBlock-module_proportional__3lAv4","attachment":"EmbedBlock-module_attachment__2pE0t","default":"EmbedBlock-module_default__LSDny","xs":"EmbedBlock-module_xs__1hFgW","full":"EmbedBlock-module_full__1TEjx","super_full":"EmbedBlock-module_super_full__1Fn9A","figure":"EmbedBlock-module_figure__vAvcN","dark":"EmbedBlock-module_dark__1be2G","isInGroupedBlock":"EmbedBlock-module_isInGroupedBlock__3r_i-","gameEmbed":"EmbedBlock-module_gameEmbed__AZQSo","mobile":"EmbedBlock-module_mobile__1P-eo","desktop":"EmbedBlock-module_desktop__SF5a_","control":"EmbedBlock-module_control__xr8dZ","raw_html":"EmbedBlock-module_raw_html__MQoAA","mobileFullwidth":"EmbedBlock-module_mobileFullwidth__QFFLH","isInCard":"EmbedBlock-module_isInCard__37rtq","isInSlide":"EmbedBlock-module_isInSlide__2ea5q","cc":"EmbedBlock-module_cc__1BQ5g","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX"};
+var styles$i = {"root":"EmbedBlock-module_root__28k9U","object":"EmbedBlock-module_object__2_UZ7","objectWrap":"EmbedBlock-module_objectWrap__1aDVd","gameEmbed":"EmbedBlock-module_gameEmbed__AZQSo","proportional":"EmbedBlock-module_proportional__3lAv4","default":"EmbedBlock-module_default__LSDny","xs":"EmbedBlock-module_xs__1hFgW","full":"EmbedBlock-module_full__1TEjx","super_full":"EmbedBlock-module_super_full__1Fn9A","figure":"EmbedBlock-module_figure__vAvcN","dark":"EmbedBlock-module_dark__1be2G","isInGroupedBlock":"EmbedBlock-module_isInGroupedBlock__3r_i-","control":"EmbedBlock-module_control__xr8dZ","raw_html":"EmbedBlock-module_raw_html__MQoAA","mobileFullwidth":"EmbedBlock-module_mobileFullwidth__QFFLH","isInCard":"EmbedBlock-module_isInCard__37rtq","isInSlide":"EmbedBlock-module_isInSlide__2ea5q","cc":"EmbedBlock-module_cc__1BQ5g","isInSensitiveBlock":"EmbedBlock-module_isInSensitiveBlock__3wWYF","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX","mobile":"EmbedBlock-module_mobile__1P-eo","desktop":"EmbedBlock-module_desktop__SF5a_"};
 
 var EmbedGif = function EmbedGif(_ref) {
   var gif = _ref.gif,
@@ -1259,7 +1269,7 @@ var EmbedBlock = function EmbedBlock(_ref) {
         {
           return React__default.createElement("div", {
             className: styles$i.figure
-          }, (small || optimized) && React__default.createElement(Image, {
+          }, React__default.createElement(Image, {
             fullscreen: {
               desktop: block.data.fullscreen,
               mobile: true
@@ -1604,7 +1614,6 @@ var RelatedBlock = function RelatedBlock(_ref) {
       title = _ref$block$data.title,
       related = _ref$block$data.related,
       onlyOn = _ref$block.only_on,
-      trackClick = _ref.trackClick,
       styleContext = _ref.styleContext;
   var classNames = [[styles$q.root, true], [styles$q[onlyOn], true]];
 
@@ -1612,12 +1621,6 @@ var RelatedBlock = function RelatedBlock(_ref) {
     classNames = makeStyleContext(classNames, styleContext, styles$q);
   }
 
-  var handleClick = function handleClick(url) {
-    if (trackClick) {
-      postMessage('simpleRelated', url, 'click');
-    }
-  };
-
   return React__default.createElement("div", {
     "data-testid": "related-block",
     className: makeClassName(classNames)
@@ -1632,10 +1635,7 @@ var RelatedBlock = function RelatedBlock(_ref) {
     }, React__default.createElement("a", {
       href: item.full_url || "/" + item.url,
       target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: function onClick() {
-        return handleClick(item.full_url || item.url);
-      }
+      rel: "noopener noreferrer"
     }, React__default.createElement("span", {
       className: styles$q.first
     }, item.title), item.second_title && ' ', item.second_title && React__default.createElement("span", null, item.second_title)));
@@ -1679,126 +1679,68 @@ var SourceBlock = function SourceBlock(_ref) {
   }, origin))));
 };
 
-var styles$s = {"root":"RelatedRichBlock-module_root__3NYmj","wrapper":"RelatedRichBlock-module_wrapper__1eLIQ","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","body":"RelatedRichBlock-module_body__1ZHZS","isRich":"RelatedRichBlock-module_isRich__1LnA4","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","picture":"RelatedRichBlock-module_picture__128HJ","isCard":"RelatedRichBlock-module_isCard__2naDz","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","center":"RelatedRichBlock-module_center__197sx","dark":"RelatedRichBlock-module_dark__3Y1fE","light":"RelatedRichBlock-module_light__2mUxL","mobile":"RelatedRichBlock-module_mobile__JpCS4","desktop":"RelatedRichBlock-module_desktop__trL0D"};
+var styles$s = {"root":"SensitiveBlock-module_root__2iJbD","container":"SensitiveBlock-module_container__1Wtix","overlay":"SensitiveBlock-module_overlay__hfDVS","content":"SensitiveBlock-module_content__sNpxZ","button":"SensitiveBlock-module_button__3BGZK","default":"SensitiveBlock-module_default__2HgmZ","full":"SensitiveBlock-module_full__3Hph9","media":"SensitiveBlock-module_media__3wnlo","super_full":"SensitiveBlock-module_super_full__14UOv","visible":"SensitiveBlock-module_visible__1B-NV","isInCard":"SensitiveBlock-module_isInCard__1L-lu","isInSlide":"SensitiveBlock-module_isInSlide__f_Ql2"};
 
-/* 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,
+var SensitiveBlock = function SensitiveBlock(_ref) {
+  var block = _ref.block,
+      _ref$block = _ref.block,
+      cc = _ref$block.cc,
+      caption = _ref$block.caption,
+      credit = _ref$block.credit,
+      blurredImage = _ref$block.blurred_image,
+      display = _ref.block.item.data.display,
       styleContext = _ref.styleContext;
-  var style = {};
-  var styleHeader = {};
-
-  var _useState = React.useState('unset'),
-      type = _useState[0],
-      setType = _useState[1];
-
-  var cardType = "is" + toCapitalize(layout);
-  React.useEffect(function () {
-    setType(Math.random() >= 0.5 ? 'simpleRelated' : 'richRelated');
-  }, []);
-
-  var _useInView = reactIntersectionObserver.useInView({
-    threshold: 0,
-    triggerOnce: true
-  }),
-      ref = _useInView[0],
-      inView = _useInView[1];
 
-  React.useEffect(function () {
-    if (inView) {
-      if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
-        postMessage(type, url, 'view');
-      }
-    }
-  }, [inView]);
+  var _useState = React.useState(false),
+      visible = _useState[0],
+      isVisible = _useState[1];
 
   var handleClick = function handleClick() {
-    postMessage(type, url, 'click');
+    isVisible(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'];
+  var classNames = [[styles$s.root, true], [styles$s.visible, visible], [styles$s[display], display && styles$s[display]]];
+  var context = ['isInSensitiveBlock'];
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles$s);
-    context = [].concat(styleContext, ['isInMediaBlock']);
+    context = [].concat(styleContext, ['isInSensitiveBlock']);
   }
 
-  if (gradients) {
-    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
-    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
-    classNames = makeStyleContext(classNames, theme, styles$s);
-
-    if (onlyOn === 'desktop') {
-      style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+  return React__default.createElement("div", {
+    "data-testid": "sensitive-block",
+    className: makeClassName(classNames)
+  }, React__default.createElement("div", {
+    className: styles$s.container
+  }, React__default.createElement("div", {
+    className: styles$s.overlay,
+    style: {
+      backgroundImage: "url(" + blurredImage + ")"
     }
-  }
-
-  if (type === 'unset') {
-    return React__default.createElement("div", {
-      className: styles$s.wrapper
-    });
-  }
-
-  if (type === 'simpleRelated') {
-    return React__default.createElement("div", {
-      ref: ref,
-      className: styles$s.wrapper
-    }, React__default.createElement(RelatedBlock, {
-      block: fallback,
-      trackClick: true,
-      styleContext: styleContext
-    }));
-  }
-
-  return React__default.createElement("a", {
-    "data-testid": "related-rich-block",
-    className: makeClassName(classNames),
-    href: "/" + url,
-    target: "_blank",
+  }, React__default.createElement("div", {
+    className: styles$s.content
+  }, React__default.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: block.title
+    }
+  }), React__default.createElement("div", {
+    className: styles$s.button
+  }, React__default.createElement(Button, {
     onClick: function onClick() {
       return handleClick();
     },
-    ref: ref
-  }, 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: "richRelated"
-  }, tag)), React__default.createElement("div", {
-    className: styles$s.cover
-  }, React__default.createElement("div", {
-    className: styles$s.picture
-  }, 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
-    });
+    theme: "light"
+  }, block.button.text)))), React__default.createElement("div", {
+    className: styles$s.media
+  }, React__default.createElement(EmbedBlockContainer, {
+    block: block.item,
+    styleContext: context
+  }))), cc && React__default.createElement("figcaption", {
+    className: styles$s.figcaption
+  }, React__default.createElement(MediaCaption, {
+    credit: credit,
+    caption: caption,
+    styleContext: styleContext
   })));
 };
 
@@ -1809,10 +1751,12 @@ var GroupedBlock = function GroupedBlock(_ref) {
       onlyOn = _ref.block.only_on,
       styleContext = _ref.styleContext;
   var maxHeight = Math.min.apply(Math, block.data.map(function (item) {
-    return item.data.height;
+    return item.data && item.data.height || item.item.data.height;
   }));
   var normalizedBoxesWidth = block.data.map(function (item) {
-    return item.data.width / (item.data.height / maxHeight);
+    var width = item.data && item.data.width || item.item.data.heigh;
+    var height = item.data && item.data.height || item.item.data.heigh;
+    return width / (height / maxHeight);
   });
   var sumWidth = normalizedBoxesWidth.reduce(function (sum, x) {
     return sum + x;
@@ -1836,7 +1780,10 @@ var GroupedBlock = function GroupedBlock(_ref) {
       style: {
         width: percentWidth + "%"
       }
-    }, React__default.createElement(EmbedBlockContainer, {
+    }, item.type === 'sensitive' ? React__default.createElement(SensitiveBlock, {
+      block: item,
+      styleContext: ['isInGroupedBlock']
+    }) : React__default.createElement(EmbedBlockContainer, {
       block: item,
       styleContext: ['isInGroupedBlock']
     }));
@@ -2150,14 +2097,6 @@ 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, {
@@ -2194,6 +2133,12 @@ var RenderBlocks = function RenderBlocks(_ref) {
         styleContext: styleContext
       });
 
+    case 'sensitive':
+      return React__default.createElement(SensitiveBlock, {
+        block: block,
+        styleContext: styleContext
+      });
+
     case 'embed':
     case 'embed_code':
     case 'game_embed':
@@ -2405,7 +2350,7 @@ var Spoiler = function Spoiler(_ref) {
   };
 
   var classNames = [[styles$A.root, true], [styles$A[onlyOn], !!onlyOn], [styles$A[display], !!display && styles$A[display]], [[styles$A.spoiled], !!spoiled]];
-  var context = ['center'].concat(styleContext);
+  var context = ['center'];
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles$A);
@@ -2441,6 +2386,103 @@ var Spoiler = function Spoiler(_ref) {
   }))));
 };
 
+var styles$B = {"root":"RelatedRichBlock-module_root__3NYmj","wrapper":"RelatedRichBlock-module_wrapper__1eLIQ","overlay":"RelatedRichBlock-module_overlay__3XSg_","overlayHeader":"RelatedRichBlock-module_overlayHeader__2Nmbv","body":"RelatedRichBlock-module_body__1ZHZS","isRich":"RelatedRichBlock-module_isRich__1LnA4","hasGradient":"RelatedRichBlock-module_hasGradient__27LOk","picture":"RelatedRichBlock-module_picture__128HJ","isCard":"RelatedRichBlock-module_isCard__2naDz","cover":"RelatedRichBlock-module_cover__3yygp","tag":"RelatedRichBlock-module_tag__3OLyG","center":"RelatedRichBlock-module_center__197sx","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,
+      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 cardType = "is" + toCapitalize(layout);
+
+  var _useInView = reactIntersectionObserver.useInView({
+    threshold: 0,
+    triggerOnce: true
+  }),
+      ref = _useInView[0],
+      inView = _useInView[1];
+
+  React.useEffect(function () {
+    if (inView) {
+      if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
+        postMessage('richRelated', url, 'view');
+      }
+    }
+  }, [inView]);
+
+  var handleClick = function handleClick() {
+    postMessage('richRelated', url, 'click');
+  };
+
+  var classNames = [[styles$B.root, true], [styles$B[cardType], !!layout && !!styles$B[cardType]], [styles$B.hasGradient, !!gradients], [styles$B[onlyOn], !!onlyOn && !!styles$B[onlyOn]]];
+  var context = ['isInMediaBlock'];
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles$B);
+    context = [].concat(styleContext, ['isInMediaBlock']);
+  }
+
+  if (gradients) {
+    styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$B);
+
+    if (onlyOn === 'desktop') {
+      style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
+    }
+  }
+
+  return React__default.createElement("a", {
+    "data-testid": "related-rich-block",
+    className: makeClassName(classNames),
+    href: "/" + url,
+    target: "_blank",
+    onClick: function onClick() {
+      return handleClick();
+    },
+    ref: ref
+  }, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$B.overlay,
+    style: style
+  }), React__default.createElement("div", {
+    className: styles$B.overlayHeader,
+    style: styleHeader
+  })), React__default.createElement("div", {
+    className: styles$B.tag
+  }, React__default.createElement(Tag, {
+    size: "small",
+    theme: "inherit",
+    styleContext: "richRelated"
+  }, tag)), React__default.createElement("div", {
+    className: styles$B.cover
+  }, React__default.createElement("div", {
+    className: styles$B.picture
+  }, React__default.createElement(Image, {
+    optimized: urls,
+    ratio: ratio,
+    display: "narrow"
+  }))), React__default.createElement("div", {
+    className: styles$B.body
+  }, blocks.map(function (item) {
+    return React__default.createElement(RenderBlocks, {
+      key: item.id,
+      block: item,
+      styleContext: context
+    });
+  })));
+};
+
 var RawHtmlBlock = function RawHtmlBlock(_ref) {
   var block = _ref.block,
       styleContext = _ref.styleContext,
@@ -2488,6 +2530,14 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
         });
       }
 
+    case 'related_rich':
+      {
+        return React__default.createElement(RelatedRichBlock, {
+          block: block,
+          styleContext: styleContext
+        });
+      }
+
     default:
       {
         return React__default.createElement(BlockProvider, {
@@ -2504,7 +2554,7 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
   }
 };
 
-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 styles$C = {"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,
@@ -2512,7 +2562,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
       theme = _ref.theme,
       isActive = _ref.isActive,
       _onClick = _ref.onClick;
-  var classNames = [[styles$B.root, true], [styles$B[type], !!styles$B[type]], [styles$B[theme], !!styles$B[theme] && !!theme], [styles$B.isActive, !!isActive]];
+  var classNames = [[styles$C.root, true], [styles$C[type], !!styles$C[type]], [styles$C[theme], !!styles$C[theme] && !!theme], [styles$C.isActive, !!isActive]];
   return React__default.createElement("button", {
     "data-testid": "toolbar-button",
     className: makeClassName(classNames),
@@ -2525,7 +2575,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
     icon: type,
     styleContext: "isInToolbar"
   }), children && React__default.createElement("span", {
-    className: styles$B.text
+    className: styles$C.text
   }, children));
 };
 
@@ -2561,6 +2611,7 @@ exports.RelatedRichBlock = RelatedRichBlock;
 exports.RenderBlocks = RenderBlocks;
 exports.RichTitle = RichTitle;
 exports.Secondary = Secondary;
+exports.SensitiveBlock = SensitiveBlock;
 exports.SimpleBlock = SimpleBlock;
 exports.SimpleTitle = SimpleTitle;
 exports.SourceBlock = SourceBlock;