@meduza/ui-kit-2 0.9.408 → 0.9.601

package/README.md

@@ -2,12 +2,12 @@
 
 ## Разработка
 
-- `yarn start` - запускает development сборку с hot reload, пишет все в папку dist
-- `cd example && yarn start` - запускает сборку тестового проекта с hot reload,
+- `pnpm start` - запускает development сборку с hot reload, пишет все в папку dist
+- `cd example && pnpm start` - запускает сборку тестового проекта с hot reload,
   в который можно импортировать компоненты из кита
-- `yarn storybook` - запускает storybook
+- `pnpm storybook` - запускает storybook
 
-`yarn generate` - генератор компонентов. Вводим название компонента, получаем все файлы и импорты
+`pnpm generate` - генератор компонентов. Вводим название компонента, получаем все файлы и импорты
 
 ## Использование
 
@@ -18,8 +18,8 @@
 
 ### Режимы сборки
 
-- `yarn build --mode development` - сборка стилей с переменными сайта
-- `yarn build --mode production` - сборка стилей без переменных
+- `pnpm build --mode development` - сборка стилей с переменными сайта
+- `pnpm build --mode production` - сборка стилей без переменных
 
 ### Особенности production сборки
 
@@ -28,3 +28,46 @@
 - После сборки запускается `build.sh`:
   1. Создает `ui-kit-game.css` с игровыми переменными
   2. Перезаписывает `ui-kit.css` с переменными сайта
+
+## Локальное подключение UI-KIT к проекту
+
+Для локального подключения UI-KIT можно воспользоваться одним из 2 следующих способов. Важно соблюдать правильный порядок действий для корректного подключения.
+
+### Подключение через link:
+
+- **как создать локальное подключение:**
+
+1. В проекте website3 прописываем команду `pnpm ui-kit-link-libraries` - этой командой мы создаем линки необходимых библиотек для UI-KIT.
+2. В данном проекте ui-kit-2 мы прописываем команду `pnpm website-link-libraries` - этой командой мы подписываемся на линки из пункта 1.
+3. В данном проекте ui-kit-2 мы прописываем команду `pnpm link` - этой командой мы создаем линк самого UI-KIT.
+4. В проекте website3 прописываем команду `pnpm link @meduza/ui-kit-2` - это командой мы подписываемся на линк из пункта 3.
+
+- **как создать файл с изменениями в UI-KIT:**
+
+1. В данном проекте ui-kit-2 мы прописываем команду `pnpm build` - этой командой мы создаем новый css-файл.
+
+- **как отключить локальное подключение:**
+
+1. В проекте website3 мы прописываем команду `pnpm ui-kit-unlink-libraries` - этой командой мы удаляем линки необходимых библиотек для UI-KIT.
+2. В проекте website3 мы прописываем команду `pnpm unlink @meduza/ui-kit-2` - этой командой мы удаляем подписку на линк UI-KIT.
+3. В данном проекте ui-kit-2 мы прописываем команду `pnpm unlink` - этой командой мы удаляем линк UI-KIT из пункта 2.
+
+### Подключение через yalc:
+
+yalc - это инструмент, который позволяет локально публиковать и подключать npm-пакеты. Это более стабильный и предсказуемый аналог `pnpm link`.
+
+- **как подключиться:**
+
+1. Если yalc не установлен, то можно его установить глобально командой `npm install -g yalc`. Если yalc установлен, то можно перейти к шагу 2.
+2. В данном проекте ui-kit-2 мы прописываем команду `yalc publish` - этой командой мы создаем линк.
+3. В проекте website3 мы прописываем команду `yalc add @meduza/ui-kit-2` - этой командой мы подписываемся на линк из шага 2.
+
+- **как создать файл с изменениями в UI-KIT:**
+
+1. В данном проекте ui-kit-2 мы прописываем команду `pnpm build` - этой командой мы создаем новый css-файл.
+2. В данном проекте ui-kit-2 мы прописываем команду `yalc publish` - этой командой мы создаем новый линк.
+3. В проекте website3 мы прописываем команду `yalc update` - это командой мы обновляем подписку на линк из шага 2.
+
+- **как отключить локальное подключение:**
+
+1. В проекте website3 мы прописываем команду `yalc remove @meduza/ui-kit-2` - этой командой мы удаляем подписку на линк.

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

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

package/dist/MetaItem/MetaItem.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface MetaItemProps {
     bullets?: boolean;
     hasSource?: boolean;

package/dist/Tooltip/Tooltip.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface TooltipProps {
     children: React.ReactNode;
     position: ['left' | 'center', 'top' | 'bottom'];

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

@@ -13,7 +13,7 @@ const makeClassName = list => {
   return list.filter(([, active]) => active).map(([className]) => className).join(' ');
 };
 
-const ButtonLoader = () => ( /*#__PURE__*/React.createElement("svg", {
+const ButtonLoader = () => (/*#__PURE__*/React.createElement("svg", {
   width: "30px",
   height: "30px",
   viewBox: "0 0 30 30",
@@ -58,7 +58,7 @@ const Button = ({
     disabled: disabled,
     onClick: handleClick,
     type: "button"
-  }, state === 'isLoading' ? ( /*#__PURE__*/React.createElement("span", {
+  }, state === 'isLoading' ? (/*#__PURE__*/React.createElement("span", {
     className: styles$J.loader
   }, /*#__PURE__*/React.createElement(ButtonLoader, null))) : children);
 };
@@ -278,7 +278,7 @@ const icons = {
   }
 };
 
-var styles$I = {"root":"SvgSymbol-module_root__WctNR","small":"SvgSymbol-module_small__h9V-w","normal":"SvgSymbol-module_normal__gFAVe","medium":"SvgSymbol-module_medium__QaYjY","large":"SvgSymbol-module_large__o6A4o","adaptive":"SvgSymbol-module_adaptive__gL9qn","fb":"SvgSymbol-module_fb__HZqcB","vk":"SvgSymbol-module_vk__XctB2","ok":"SvgSymbol-module_ok__IM6Z9","tw":"SvgSymbol-module_tw__fio-Q","tg":"SvgSymbol-module_tg__GRhd-","magic":"SvgSymbol-module_magic__N-jKk","reaction":"SvgSymbol-module_reaction__xSbgo","card":"SvgSymbol-module_card__2nVFu","podcast":"SvgSymbol-module_podcast__Yp05r","read":"SvgSymbol-module_read__Bu653","listened":"SvgSymbol-module_listened__AOn7j","menu":"SvgSymbol-module_menu__z-dLm","cross":"SvgSymbol-module_cross__3Xej1","isInFeature":"SvgSymbol-module_isInFeature__BmyI-","isInCard":"SvgSymbol-module_isInCard__USxBS","isInTopicBlockItem":"SvgSymbol-module_isInTopicBlockItem__cnCgw","isInPageStatic":"SvgSymbol-module_isInPageStatic__7kMP-","isInMaterialMeta":"SvgSymbol-module_isInMaterialMeta__lIKJO","isInAudioPlayer":"SvgSymbol-module_isInAudioPlayer__mamWa","isInEpisodeBlock":"SvgSymbol-module_isInEpisodeBlock__oZ6JG","isInButtonPlaybackRate":"SvgSymbol-module_isInButtonPlaybackRate__NnADm","isInButtonBackward":"SvgSymbol-module_isInButtonBackward__x8L9a","isInButtonForward":"SvgSymbol-module_isInButtonForward__TtixK","isInToolbar":"SvgSymbol-module_isInToolbar__RzbaX","play":"SvgSymbol-module_play__dAES0","meduzaLogo":"SvgSymbol-module_meduzaLogo__aVKzZ","arrow":"SvgSymbol-module_arrow__lWTSJ","oil":"SvgSymbol-module_oil__VFGTp","search":"SvgSymbol-module_search__h06cc","user":"SvgSymbol-module_user__ORMm-","bookmark":"SvgSymbol-module_bookmark__JPKyG","shareBookmark":"SvgSymbol-module_shareBookmark__7w9X9","receipt":"SvgSymbol-module_receipt__o3V8u","isInHeader":"SvgSymbol-module_isInHeader__M5Tzw"};
+var styles$I = {"root":"SvgSymbol-module_root__WctNR","small":"SvgSymbol-module_small__h9V-w","normal":"SvgSymbol-module_normal__gFAVe","medium":"SvgSymbol-module_medium__QaYjY","large":"SvgSymbol-module_large__o6A4o","adaptive":"SvgSymbol-module_adaptive__gL9qn","fb":"SvgSymbol-module_fb__HZqcB","vk":"SvgSymbol-module_vk__XctB2","ok":"SvgSymbol-module_ok__IM6Z9","tw":"SvgSymbol-module_tw__fio-Q","tg":"SvgSymbol-module_tg__GRhd-","magic":"SvgSymbol-module_magic__N-jKk","reaction":"SvgSymbol-module_reaction__xSbgo","card":"SvgSymbol-module_card__2nVFu","podcast":"SvgSymbol-module_podcast__Yp05r","read":"SvgSymbol-module_read__Bu653","listened":"SvgSymbol-module_listened__AOn7j","menu":"SvgSymbol-module_menu__z-dLm","cross":"SvgSymbol-module_cross__3Xej1","isInFeature":"SvgSymbol-module_isInFeature__BmyI-","isInCard":"SvgSymbol-module_isInCard__USxBS","isInTopicBlockItem":"SvgSymbol-module_isInTopicBlockItem__cnCgw","isInPageStatic":"SvgSymbol-module_isInPageStatic__7kMP-","isInMaterialMeta":"SvgSymbol-module_isInMaterialMeta__lIKJO","isInAudioPlayer":"SvgSymbol-module_isInAudioPlayer__mamWa","isInEpisodeBlock":"SvgSymbol-module_isInEpisodeBlock__oZ6JG","isInButtonPlaybackRate":"SvgSymbol-module_isInButtonPlaybackRate__NnADm","isInButtonBackward":"SvgSymbol-module_isInButtonBackward__x8L9a","isInButtonForward":"SvgSymbol-module_isInButtonForward__TtixK","isInToolbar":"SvgSymbol-module_isInToolbar__RzbaX","play":"SvgSymbol-module_play__dAES0","speedHalf":"SvgSymbol-module_speedHalf__mvVYC","speedThreeQuarters":"SvgSymbol-module_speedThreeQuarters__9N7uH","speedOne":"SvgSymbol-module_speedOne__sRNph","speedOneQuarter":"SvgSymbol-module_speedOneQuarter__fKIT7","speedOneHalf":"SvgSymbol-module_speedOneHalf__7yXsa","speedTwo":"SvgSymbol-module_speedTwo__Bv8-b","meduzaLogo":"SvgSymbol-module_meduzaLogo__aVKzZ","arrow":"SvgSymbol-module_arrow__lWTSJ","oil":"SvgSymbol-module_oil__VFGTp","search":"SvgSymbol-module_search__h06cc","user":"SvgSymbol-module_user__ORMm-","bookmark":"SvgSymbol-module_bookmark__JPKyG","shareBookmark":"SvgSymbol-module_shareBookmark__7w9X9","receipt":"SvgSymbol-module_receipt__o3V8u","isInHeader":"SvgSymbol-module_isInHeader__M5Tzw"};
 
 const SvgSymbol = ({
   icon,
@@ -289,7 +289,7 @@ const SvgSymbol = ({
   return /*#__PURE__*/React.createElement("svg", {
     "data-testid": "svg-symbol",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: icon !== 'play' && icon !== 'pause' ? 'http://www.w3.org/1999/xlink' : '',
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     className: makeClassName([[styles$I.root, true], [styles$I[size], !!styles$I[size]], [styles$I[icon], !!styles$I[icon]], [styles$I[styleContext], !!styles$I[styleContext]]]),
     width: data.width,
     height: data.height,
@@ -309,10 +309,10 @@ const Switcher = ({
   theme = 'light',
   childrenLeft,
   childrenRight
-}) => ( /*#__PURE__*/React.createElement("label", {
+}) => (/*#__PURE__*/React.createElement("label", {
   "data-testid": "switcher",
   className: makeClassName([[styles$H.root, true], [styles$H[theme], !!styles$H[theme]], [styles$H[styleContext], !!styles$H[styleContext]]])
-}, childrenLeft && ( /*#__PURE__*/React.createElement("div", {
+}, childrenLeft && (/*#__PURE__*/React.createElement("div", {
   className: makeClassName([[styles$H.children, true], [styles$H.left, true]])
 }, childrenLeft)), /*#__PURE__*/React.createElement("input", {
   className: styles$H.input,
@@ -323,7 +323,7 @@ const Switcher = ({
   className: styles$H.control
 }, /*#__PURE__*/React.createElement("span", {
   className: styles$H.knob
-})), childrenRight && ( /*#__PURE__*/React.createElement("div", {
+})), childrenRight && (/*#__PURE__*/React.createElement("div", {
   className: makeClassName([[styles$H.children, true], [styles$H.right, true]])
 }, childrenRight))));
 
@@ -435,10 +435,10 @@ const RenderPicture = ({
     setFallback(!window.HTMLPictureElement);
   }, []);
   const keys = imageConditionalKeys[toCamel(display)] || imageConditionalKeys.default;
-  return /*#__PURE__*/React.createElement("picture", null, source && ( /*#__PURE__*/React.createElement("source", {
+  return /*#__PURE__*/React.createElement("picture", null, source && (/*#__PURE__*/React.createElement("source", {
     media: "(min-width: 325px)",
     srcSet: `${source[1]} 2x`
-  })), optimized && !optimized.w325 && ( /*#__PURE__*/React.createElement("source", {
+  })), optimized && !optimized.w325 && (/*#__PURE__*/React.createElement("source", {
     media: "(min-width: 0)",
     srcSet: `${optimized.original}`
   })), optimized && keys.map(key => {
@@ -512,7 +512,7 @@ const Image = ({
     onKeyPress: () => handleClick(),
     role: "button",
     tabIndex: 0
-  }, lazy ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Lazy, {
+  }, lazy ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Lazy, {
     threshold: 0.25
   }, /*#__PURE__*/React.createElement(RenderPicture, {
     fallbackSource: fallbackSource,
@@ -524,7 +524,7 @@ const Image = ({
   })), /*#__PURE__*/React.createElement("noscript", null, /*#__PURE__*/React.createElement("img", {
     src: fallbackSource,
     alt: alt
-  })))) : ( /*#__PURE__*/React.createElement(RenderPicture, {
+  })))) : (/*#__PURE__*/React.createElement(RenderPicture, {
     fallbackSource: fallbackSource,
     source: source,
     optimized: optimized,
@@ -732,7 +732,7 @@ const DotsOnImage = ({
     display: display
   }), /*#__PURE__*/React.createElement("div", {
     ref: container
-  }, dots.map(dot => ( /*#__PURE__*/React.createElement("div", {
+  }, dots.map(dot => (/*#__PURE__*/React.createElement("div", {
     className: styles$C.dot,
     key: dot.id,
     style: {
@@ -747,11 +747,11 @@ const DotsOnImage = ({
       backgroundColor: dot.icon.color
     },
     onClick: () => handleDotClick(dot)
-  }, dot.icon.type === 'svg' && ( /*#__PURE__*/React.createElement("div", {
+  }, dot.icon.type === 'svg' && (/*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: dot.icon.svg_string
     }
-  })), dot.icon.type === 'number' && dot.icon.number)))), popover.show && ( /*#__PURE__*/React.createElement(React.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? ( /*#__PURE__*/React.createElement("div", {
+  })), dot.icon.type === 'number' && dot.icon.number)))), popover.show && (/*#__PURE__*/React.createElement(React.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? (/*#__PURE__*/React.createElement("div", {
     className: makeClassName([[styles$C.popover, true], [styles$C[popover.side], !!popover.side], [styles$C[popover.align], !!popover.align]]),
     style: popover.style
   }, /*#__PURE__*/React.createElement(Footnote, {
@@ -764,7 +764,7 @@ const DotsOnImage = ({
     dangerouslySetInnerHTML: {
       __html: popover.body
     }
-  })))) : ( /*#__PURE__*/React.createElement(Popover, {
+  })))) : (/*#__PURE__*/React.createElement(Popover, {
     onClose: () => {
       setPopover({
         show: false
@@ -811,12 +811,12 @@ const MediaCaption = ({
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "media-caption",
     className: makeClassName(classNames)
-  }, caption && ( /*#__PURE__*/React.createElement("div", {
+  }, caption && (/*#__PURE__*/React.createElement("div", {
     className: styles$A.caption,
     dangerouslySetInnerHTML: {
       __html: caption
     }
-  })), credit && ( /*#__PURE__*/React.createElement("div", {
+  })), credit && (/*#__PURE__*/React.createElement("div", {
     className: styles$A.credit,
     dangerouslySetInnerHTML: {
       __html: credit
@@ -863,14 +863,14 @@ const Table = ({
     return /*#__PURE__*/React.createElement("div", {
       key: row.key,
       className: styles$z.row
-    }, row.cells.map((cell, j) => ( /*#__PURE__*/React.createElement("div", {
+    }, row.cells.map((cell, j) => (/*#__PURE__*/React.createElement("div", {
       key: cell.key,
       className: makeClassName([[styles$z.cell, true], [styles$z.header, options.header && i === 0], [styles$z[colors[cell.color]], true], [styles$z[columnsWidth[j]], true], [styles$z.fixedColumn, options.fixed_first_column && j === 0]]),
       dangerouslySetInnerHTML: {
         __html: cell.val
       }
     }))));
-  })))), tableCredit && ( /*#__PURE__*/React.createElement(MediaCaption, {
+  })))), tableCredit && (/*#__PURE__*/React.createElement(MediaCaption, {
     credit: tableCredit,
     styleContext: styleContext
   })));
@@ -891,7 +891,7 @@ const MaterialNote = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-testid": "material-note",
     className: makeClassName(classNames)
-  }, data && data.map(item => ( /*#__PURE__*/React.createElement("p", {
+  }, data && data.map(item => (/*#__PURE__*/React.createElement("p", {
     className: styles$y[item.type],
     key: item.id,
     dangerouslySetInnerHTML: {
@@ -1186,7 +1186,7 @@ const EmbedBlock = ({
   const isProportional = block.data.height && block.data.width;
   const fullWidthProviders = ['youtube', 'vimeo', 'onetv', 'coub', 'meduza', 'facebook_video'];
   const mobileFullwidth = fullWidthProviders.indexOf(provider) > -1 || block.type === 'dots_on_image';
-  const renderCC = context => ( /*#__PURE__*/React.createElement(MediaCaption, {
+  const renderCC = context => (/*#__PURE__*/React.createElement(MediaCaption, {
     credit: data.credit,
     caption: data.caption,
     styleContext: context || styleContext
@@ -1264,21 +1264,21 @@ const EmbedBlock = ({
   }
   return /*#__PURE__*/React.createElement("figure", {
     className: makeClassName(classNames)
-  }, children && ( /*#__PURE__*/React.createElement("div", {
+  }, children && (/*#__PURE__*/React.createElement("div", {
     className: styles$r.object
   }, /*#__PURE__*/React.createElement("div", {
     className: makeClassName([[styles$r.wrapper, true], [styles$r.isProportional, isProportional]]),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$r.objectWrap
-  }, children)))), !children && renderEmbed(style), cc === 'default' && /*#__PURE__*/React.createElement("figcaption", null, renderCC()), cc === 'button' && ( /*#__PURE__*/React.createElement("button", {
+  }, children)))), !children && renderEmbed(style), cc === 'default' && /*#__PURE__*/React.createElement("figcaption", null, renderCC()), cc === 'button' && (/*#__PURE__*/React.createElement("button", {
     className: styles$r.control,
     type: "button",
     "aria-label": "Open",
     onClick: () => {
       setIsPopoverShown(!isPopoverShown);
     }
-  })), cc === 'button' && isPopoverShown && ( /*#__PURE__*/React.createElement(Popover, {
+  })), cc === 'button' && isPopoverShown && (/*#__PURE__*/React.createElement(Popover, {
     onClose: () => {
       setIsPopoverShown(false);
     }
@@ -1562,7 +1562,7 @@ const ListBlock = ({
   return /*#__PURE__*/React.createElement(TagName, {
     className: makeClassName(classNames),
     "data-testid": "list-block"
-  }, data.map((item, index) => ( /*#__PURE__*/React.createElement("li", {
+  }, data.map((item, index) => (/*#__PURE__*/React.createElement("li", {
     key: index,
     dangerouslySetInnerHTML: {
       __html: item
@@ -1593,7 +1593,7 @@ const RelatedBlock = ({
     className: styles$j.header
   }, title), /*#__PURE__*/React.createElement("ul", {
     className: styles$j.items
-  }, related.map((item, index) => ( /*#__PURE__*/React.createElement("li", {
+  }, related.map((item, index) => (/*#__PURE__*/React.createElement("li", {
     key: item.id || index,
     className: styles$j[item.layout]
   }, /*#__PURE__*/React.createElement(reactRouterDom.Link, {
@@ -1629,7 +1629,7 @@ const SourceBlock = ({
     href: url,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, quote.map((item, index) => ( /*#__PURE__*/React.createElement("p", {
+  }, quote.map((item, index) => (/*#__PURE__*/React.createElement("p", {
     key: index,
     dangerouslySetInnerHTML: {
       __html: item.data
@@ -1694,7 +1694,7 @@ const SensitiveBlock = ({
   }, /*#__PURE__*/React.createElement(EmbedBlockContainer, {
     block: block.item,
     styleContext: context
-  }))), cc && ( /*#__PURE__*/React.createElement("figcaption", {
+  }))), cc && (/*#__PURE__*/React.createElement("figcaption", {
     className: styles$h.figcaption
   }, /*#__PURE__*/React.createElement(MediaCaption, {
     credit: credit,
@@ -1736,14 +1736,14 @@ const GroupedBlock = ({
       style: {
         width: `${percentWidth}%`
       }
-    }, item.type === 'sensitive' ? ( /*#__PURE__*/React.createElement(SensitiveBlock, {
+    }, item.type === 'sensitive' ? (/*#__PURE__*/React.createElement(SensitiveBlock, {
       block: item,
       styleContext: ['isInGroupedBlock']
-    })) : ( /*#__PURE__*/React.createElement(EmbedBlockContainer, {
+    })) : (/*#__PURE__*/React.createElement(EmbedBlockContainer, {
       block: item,
       styleContext: ['isInGroupedBlock']
     })));
-  })), block.cc && ( /*#__PURE__*/React.createElement("figcaption", {
+  })), block.cc && (/*#__PURE__*/React.createElement("figcaption", {
     className: styles$g.figcaption
   }, /*#__PURE__*/React.createElement(MediaCaption, {
     credit: block.credit,
@@ -1879,7 +1879,7 @@ const MetaContainer = ({
             hasSource: hasSource,
             bullets: true,
             key: component.id
-          }, /*#__PURE__*/React.createElement(React.Fragment, null, lang === 'ru' ? 'Источник: ' : 'Source: ', component.url && ( /*#__PURE__*/React.createElement("a", {
+          }, /*#__PURE__*/React.createElement(React.Fragment, null, lang === 'ru' ? 'Источник: ' : 'Source: ', component.url && (/*#__PURE__*/React.createElement("a", {
             href: component.url,
             rel: "noopener noreferrer",
             target: "_blank"
@@ -1891,7 +1891,7 @@ const MetaContainer = ({
             hasSource: hasSource,
             bullets: true,
             key: component.id
-          }, /*#__PURE__*/React.createElement(React.Fragment, null, styleContext !== 'isInDynamicBlock' && ( /*#__PURE__*/React.createElement(SvgSymbol, {
+          }, /*#__PURE__*/React.createElement(React.Fragment, null, styleContext !== 'isInDynamicBlock' && (/*#__PURE__*/React.createElement(SvgSymbol, {
             icon: "podcast",
             size: "small"
           })), component.text));
@@ -1954,14 +1954,14 @@ const MetaContainer = ({
           return null;
         }
     }
-  }), (isRead || isListened) && ( /*#__PURE__*/React.createElement(MetaItem, {
+  }), (isRead || isListened) && (/*#__PURE__*/React.createElement(MetaItem, {
     hasSource: hasSource,
     bullets: true,
     type: isListened ? 'listened' : 'read'
   }, /*#__PURE__*/React.createElement(SvgSymbol, {
     icon: isListened ? 'listened' : 'read',
     size: "unset"
-  }))), isSlides && lang === 'ru' && ( /*#__PURE__*/React.createElement("div", {
+  }))), isSlides && lang === 'ru' && (/*#__PURE__*/React.createElement("div", {
     className: styles$t.bookmark
   }, /*#__PURE__*/React.createElement(BookmarkButton, {
     isInBookmarks: isInBookmarks,
@@ -2086,7 +2086,7 @@ const VersesBlock = ({
   return /*#__PURE__*/React.createElement("ul", {
     className: makeClassName(classNames),
     "data-testid": "verses-block"
-  }, data.map((item, index) => ( /*#__PURE__*/React.createElement("li", {
+  }, data.map((item, index) => (/*#__PURE__*/React.createElement("li", {
     key: index,
     dangerouslySetInnerHTML: {
       __html: item
@@ -2287,7 +2287,7 @@ const Cover = ({
     classNames = makeStyleContext(classNames, theme, styles$9);
     style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
   }
-  const renderCC = context => ( /*#__PURE__*/React.createElement(MediaCaption, {
+  const renderCC = context => (/*#__PURE__*/React.createElement(MediaCaption, {
     credit: credit,
     caption: caption,
     styleContext: context || styleContext
@@ -2304,18 +2304,18 @@ const Cover = ({
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$9.body,
     style: style
-  }, blocks.map(item => ( /*#__PURE__*/React.createElement(RenderBlocks, {
+  }, blocks.map(item => (/*#__PURE__*/React.createElement(RenderBlocks, {
     key: item.id,
     block: item,
     styleContext: styleContext
-  })))), cc === 'button' && ( /*#__PURE__*/React.createElement("button", {
+  })))), cc === 'button' && (/*#__PURE__*/React.createElement("button", {
     className: styles$9.control,
     type: "button",
     "aria-label": "Open",
     onClick: () => {
       setIsPopoverShown(!isPopoverShown);
     }
-  })), cc === 'button' && isPopoverShown && ( /*#__PURE__*/React.createElement(Popover, {
+  })), cc === 'button' && isPopoverShown && (/*#__PURE__*/React.createElement(Popover, {
     onClose: () => {
       setIsPopoverShown(false);
     }
@@ -2356,7 +2356,7 @@ const HalfBlock = ({
     display: "super_full"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles$8.body
-  }, data.blocks.map(item => ( /*#__PURE__*/React.createElement(RenderBlocks, {
+  }, data.blocks.map(item => (/*#__PURE__*/React.createElement(RenderBlocks, {
     key: item.id,
     block: item,
     styleContext: ['rich']
@@ -2385,7 +2385,7 @@ const ImportantLead = ({
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "important-lead",
     className: makeClassName(classNames)
-  }, data.map(item => ( /*#__PURE__*/React.createElement(RenderBlocks, {
+  }, data.map(item => (/*#__PURE__*/React.createElement(RenderBlocks, {
     key: item.id,
     block: item,
     styleContext: "isInImportantLead"
@@ -2437,7 +2437,7 @@ const Spoiler = ({
     className: styles$6.header
   }, title && /*#__PURE__*/React.createElement("h3", null, title)), /*#__PURE__*/React.createElement("div", {
     className: styles$6.body
-  }, blocks.map(item => ( /*#__PURE__*/React.createElement(RenderBlocks, {
+  }, blocks.map(item => (/*#__PURE__*/React.createElement(RenderBlocks, {
     key: item.id,
     block: item,
     styleContext: context
@@ -2510,7 +2510,7 @@ const RelatedRichBlock = ({
     to: `/${url}`,
     onClick: () => handleClick(),
     ref: ref
-  }, layout === 'rich' && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, layout === 'rich' && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles$5.overlay,
     style: style
   }), /*#__PURE__*/React.createElement("div", {
@@ -2532,7 +2532,7 @@ const RelatedRichBlock = ({
     display: "narrow"
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles$5.body
-  }, blocks.map(item => ( /*#__PURE__*/React.createElement(RenderBlocks, {
+  }, blocks.map(item => (/*#__PURE__*/React.createElement(RenderBlocks, {
     key: item.id,
     block: item,
     styleContext: context
@@ -2595,7 +2595,7 @@ const ShopRelatedBlock = ({
     target: "_blank",
     onClick: () => handleClick(),
     ref: ref
-  }, layout === 'rich' && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, layout === 'rich' && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles$4.overlay,
     style: style
   }), /*#__PURE__*/React.createElement("div", {
@@ -2660,7 +2660,7 @@ const RelatedBook = ({
     className: styles$3.contentWrap
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.content
-  }, block.data.blocks.map(item => ( /*#__PURE__*/React.createElement(RenderBlocks, {
+  }, block.data.blocks.map(item => (/*#__PURE__*/React.createElement(RenderBlocks, {
     key: item.id,
     block: item,
     styleContext: ['isInMediaBlock', 'isInBookRelated', 'isCustom']
@@ -2755,7 +2755,7 @@ const ListViewSwitcher = ({
   enabled,
   onChange,
   size = 'md'
-}) => ( /*#__PURE__*/React.createElement("label", {
+}) => (/*#__PURE__*/React.createElement("label", {
   "data-testid": "listViewSwitcher",
   className: makeClassName([[styles$2.root, true], [styles$2[size], true]])
 }, /*#__PURE__*/React.createElement("input", {
@@ -2789,7 +2789,7 @@ const ToolbarButton = ({
     className: makeClassName(classNames),
     type: "button",
     onClick: event => onClick(event, type)
-  }, icon && ( /*#__PURE__*/React.createElement("div", {
+  }, icon && (/*#__PURE__*/React.createElement("div", {
     className: styles$1.icon
   }, /*#__PURE__*/React.createElement(SvgSymbol, {
     size: "medium",