@meduza/ui-kit-2 0.1.20 → 0.1.22

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

@@ -1666,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,
@@ -1681,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 + "%"
@@ -1705,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,
@@ -1713,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
   }));
 };
 
@@ -1763,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,
@@ -1800,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));
 };
 
@@ -2005,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, {
@@ -2072,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,
@@ -2093,15 +2185,15 @@ 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);
+    classNames = makeStyleContext(classNames, theme, styles$x);
     style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
   }
 
@@ -2117,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, {
@@ -2132,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() {
@@ -2145,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,
@@ -2157,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,
@@ -2183,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,
@@ -2191,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", {
@@ -2216,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,
@@ -2251,10 +2343,11 @@ 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]];
+  var context = ['center'].concat(styleContext);
 
   if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$z);
+    classNames = makeStyleContext(classNames, styleContext, styles$A);
   }
 
   var buttonCollapse = button ? button.collapse : 'Свернуть';
@@ -2264,17 +2357,17 @@ 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,
       block: item,
-      styleContext: styleContext
+      styleContext: context
     });
   })), React__default.createElement("div", {
-    className: styles$z.footer
+    className: styles$A.footer
   }, React__default.createElement(Button, {
     size: "default",
     theme: "gray",
@@ -2350,7 +2443,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,
@@ -2358,7 +2451,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),
@@ -2371,92 +2464,10 @@ var ToolbarButton = function ToolbarButton(_ref) {
     icon: type,
     styleContext: "isInToolbar"
   }), children && React__default.createElement("span", {
-    className: styles$A.text
+    className: styles$B.text
   }, children));
 };
 
-var styles$B = {"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$B.root, true], [styles$B[cardType], !!layout && !!styles$B[cardType]], [styles$B.hasGradient, !!gradients], [styles$B[onlyOn], !!onlyOn && !!styles$B[onlyOn]]];
-
-  if (styleContext) {
-    classNames = makeStyleContext(classNames, styleContext, styles$B);
-  }
-
-  if (gradients) {
-    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
-    classNames = makeStyleContext(classNames, theme, styles$B);
-    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$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: "rich"
-  }, tag)), React__default.createElement("div", {
-    className: styles$B.cover
-  }, 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: [].concat(styleContext, ['isInMediaBlock'])
-    });
-  })));
-};
-
 exports.BookmarkButton = BookmarkButton;
 exports.Button = Button;
 exports.CardTitle = CardTitle;