@meduza/ui-kit-2 0.1.19 → 0.1.21

package/dist/ui-kit-2.esm.js

@@ -370,6 +370,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,
@@ -1389,7 +1392,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.createElement(IframeBlock, {
       block: block,
       styleContext: styleContext,
@@ -1460,9 +1463,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 + ")";
@@ -1487,7 +1493,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,
@@ -1568,7 +1574,8 @@ var ListBlock = function ListBlock(_ref) {
   }
 
   return React.createElement(TagName, {
-    className: makeClassName(classNames)
+    className: makeClassName(classNames),
+    "data-testid": "list-block"
   }, data.map(function (item, index) {
     return React.createElement("li", {
       key: index,
@@ -1652,7 +1659,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 = useState(false),
+      isRich = _useState[0],
+      setIsRich = _useState[1];
+
+  var cardType = "is" + toCapitalize(layout);
+  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.createElement(RelatedBlock, {
+      block: fallback
+    });
+  }
+
+  return React.createElement("a", {
+    "data-testid": "related-rich-block",
+    className: makeClassName(classNames),
+    href: url,
+    target: "_blank"
+  }, layout === 'rich' && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: styles$s.overlay,
+    style: style
+  }), React.createElement("div", {
+    className: styles$s.overlayHeader,
+    style: styleHeader
+  })), React.createElement("div", {
+    className: styles$s.tag
+  }, React.createElement(Tag, {
+    size: "small",
+    theme: "inherit",
+    styleContext: "rich"
+  }, tag)), React.createElement("div", {
+    className: styles$s.cover
+  }, React.createElement(Image, {
+    optimized: urls,
+    ratio: ratio,
+    display: "narrow"
+  })), React.createElement("div", {
+    className: styles$s.body
+  }, blocks.map(function (item) {
+    return React.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,
@@ -1667,21 +1758,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.createElement("div", {
     "data-testid": "grouped-block",
     className: makeClassName(classNames)
   }, React.createElement("div", {
-    className: styles$s.items
+    className: styles$t.items
   }, block.data.map(function (item, index) {
     var percentWidth = normalizedBoxesWidth[index] / sumWidth * 100;
     return React.createElement("div", {
-      className: styles$s.item,
+      className: styles$t.item,
       key: item.id,
       style: {
         width: percentWidth + "%"
@@ -1691,7 +1782,7 @@ var GroupedBlock = function GroupedBlock(_ref) {
       styleContext: "isInGroupedBlock"
     }));
   })), block.cc && React.createElement("figcaption", {
-    className: styles$s.figcaption
+    className: styles$t.figcaption
   }, React.createElement(MediaCaption, {
     credit: block.credit,
     caption: block.caption,
@@ -1699,32 +1790,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.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.createElement("div", {
     "data-testid": "meta-item-live",
     "data-meta": "live",
     className: makeClassName(classNames)
   }, React.createElement("div", {
-    className: styles$u.frame
+    className: styles$v.frame
   }));
 };
 
@@ -1749,7 +1840,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,
@@ -1786,9 +1877,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.createElement("div", {
     "data-testid": "document-items-count",
-    className: styles$v.root
+    className: styles$w.root
   }, children, React.createElement("span", {
-    className: styles$v.items
+    className: styles$w.items
   }, itemsCount));
 };
 
@@ -1991,6 +2082,14 @@ var RenderBlocks = function RenderBlocks(_ref) {
         });
       }
 
+    case 'related_rich':
+      {
+        return React.createElement(RelatedRichBlock, {
+          block: block,
+          styleContext: styleContext
+        });
+      }
+
     case 'chapter-subtitle':
       {
         return React.createElement(ChapterBlock, {
@@ -2058,7 +2157,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,
@@ -2079,16 +2178,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) {
@@ -2103,13 +2202,13 @@ var Cover = function Cover(_ref) {
     "data-testid": "cover",
     className: makeClassName(classNames)
   }, React.createElement("div", {
-    className: styles$w.image
+    className: styles$x.image
   }, React.createElement(Image, {
     optimized: urls,
     ratio: mobileRatio,
     display: "narrow"
   })), React.createElement("div", {
-    className: styles$w.body,
+    className: styles$x.body,
     style: style
   }, blocks.map(function (item) {
     return React.createElement(RenderBlocks, {
@@ -2118,7 +2217,7 @@ var Cover = function Cover(_ref) {
       styleContext: styleContext
     });
   })), cc === 'button' && React.createElement("button", {
-    className: styles$w.control,
+    className: styles$x.control,
     type: "button",
     "aria-label": "Open",
     onClick: function onClick() {
@@ -2131,7 +2230,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,
@@ -2143,25 +2242,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.createElement("div", {
     "data-testid": "half-block",
     className: makeClassName(classNames)
   }, React.createElement("div", {
-    className: styles$x.main
+    className: styles$y.main
   }, React.createElement("div", {
-    className: styles$x.image
+    className: styles$y.image
   }, React.createElement(Image, {
     optimized: optimized,
     ratio: ratio,
     display: "super_full"
   })), React.createElement("div", {
-    className: styles$x.body
+    className: styles$y.body
   }, data.blocks.map(function (item) {
     return React.createElement(RenderBlocks, {
       key: item.id,
@@ -2169,7 +2268,7 @@ var HalfBlock = function HalfBlock(_ref) {
       styleContext: ['rich']
     });
   }))), React.createElement("div", {
-    className: styles$x.footer
+    className: styles$y.footer
   }, React.createElement(MediaCaption, {
     credit: credit,
     caption: caption,
@@ -2177,17 +2276,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.createElement("div", {
@@ -2202,7 +2301,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,
@@ -2237,10 +2336,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 : 'Свернуть';
@@ -2250,9 +2349,9 @@ var Spoiler = function Spoiler(_ref) {
     className: makeClassName(classNames),
     "data-testid": "spoiler"
   }, React.createElement("div", {
-    className: styles$z.header
+    className: styles$A.header
   }, title && React.createElement("h3", null, title)), React.createElement("div", {
-    className: styles$z.body
+    className: styles$A.body
   }, blocks.map(function (item) {
     return React.createElement(RenderBlocks, {
       key: item.id,
@@ -2260,7 +2359,7 @@ var Spoiler = function Spoiler(_ref) {
       styleContext: styleContext
     });
   })), React.createElement("div", {
-    className: styles$z.footer
+    className: styles$A.footer
   }, React.createElement(Button, {
     size: "default",
     theme: "gray",
@@ -2336,7 +2435,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,
@@ -2344,7 +2443,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.createElement("button", {
     "data-testid": "toolbar-button",
     className: makeClassName(classNames),
@@ -2357,9 +2456,9 @@ var ToolbarButton = function ToolbarButton(_ref) {
     icon: type,
     styleContext: "isInToolbar"
   }), children && React.createElement("span", {
-    className: styles$A.text
+    className: styles$B.text
   }, children));
 };
 
-export { BookmarkButton, Button, CardTitle, ChapterBlock, Cover, DocumentItemsCount, DotsOnImage, Dropdown, EmbedBlockContainer, Footnote, GroupedBlock, HalfBlock, Image, ImportantLead, Lazy, ListBlock, MaterialNote, MaterialTitle, MediaCaption, Menu, Meta, MetaItem, MetaItemLive, Popover, Primary, QuoteBlock, RawHtmlBlock, RelatedBlock, RenderBlocks, RichTitle, Secondary, SimpleBlock, SimpleTitle, SourceBlock, Spoiler, SvgSymbol, Switcher, Table, Tag, Timestamp, Toolbar, ToolbarButton };
+export { BookmarkButton, Button, CardTitle, ChapterBlock, Cover, DocumentItemsCount, DotsOnImage, Dropdown, EmbedBlockContainer, Footnote, GroupedBlock, HalfBlock, Image, ImportantLead, Lazy, ListBlock, MaterialNote, MaterialTitle, MediaCaption, Menu, Meta, MetaItem, MetaItemLive, Popover, Primary, QuoteBlock, RawHtmlBlock, RelatedBlock, RelatedRichBlock, RenderBlocks, RichTitle, Secondary, SimpleBlock, SimpleTitle, SourceBlock, Spoiler, SvgSymbol, Switcher, Table, Tag, Timestamp, Toolbar, ToolbarButton };
 //# sourceMappingURL=ui-kit-2.esm.js.map