@redneckz/wildless-cms-uni-blocks 0.11.2 → 0.11.3

package/src/components/CardTransfer/CardTransfer.tsx

@@ -43,8 +43,14 @@ export const CardTransfer = JSX<CardTransferProps>(
 
     return (
       <BlockWrapper className={style('p-default flex flex-col items-center', className)} {...rest}>
-        {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
-        <form className="w-[468px]" method="POST" action={FORM_URL}>
+        {title ? (
+          <Heading
+            className="pb-5 xl:pb-9 self-start xl:self-center"
+            headingType="h2"
+            title={title}
+          />
+        ) : null}
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput
             name={AMOUNT_KEY}
             valid={!isDisabled}
@@ -55,7 +61,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           {button?.text ? (
             <button
               type="submit"
-              className={style('w-full p-4 mt-6', buttonStyle)}
+              className={style('w-full p-4 mt-5 xl:mt-6', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

package/src/components/CarouselCard/CarouselCard.fixture.mobile.tsx

@@ -0,0 +1,28 @@
+import '../../setup-fixture';
+
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselCard } from './CarouselCard';
+import type { CarouselCardContent } from './CarouselCardContent';
+
+const button: ButtonProps = {
+  text: 'Подробнее',
+  href: '/credit-cards',
+  version: 'primary',
+};
+
+export const CARD: CarouselCardContent = {
+  title: 'Контакты и реквизиты',
+  description:
+    'АО «Россельхозбанк» занимает второе место в России по размеру филиальной сети — 66 филиалов во всех регионах страны',
+  button,
+  carouselVersion: 'normal',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCard className="col-span-4" {...CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,23 +1,24 @@
+import type { CarouselCardContent } from './CarouselCardContent';
+import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { SizeVersion } from '../../model/SizeVersion';
+import { getCardWidth } from './getCardWidth';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Headline } from '../Headline/Headline';
-import type { CarouselCardContent } from './CarouselCardContent';
+import { style } from '../../utils/style';
+import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
-
-const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
-  normal: 'min-w-[970px]',
-  small: 'min-w-[355px]',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
     <section
-      className={`flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+      className={style(
+        'flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]',
+        getCardWidth(className, carouselVersion),
+        className,
+      )}
     >
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
@@ -28,11 +29,14 @@ export const CarouselCard = JSX<CarouselCardProps>(
             className="!p-0"
             title={title}
             description={description}
-            headlineVersion="L"
+            headlineVersion={titleSize}
             align="text-left"
             version={version}
           />
-          {renderButtonsSection([button], { className: 'mt-14' })}
+          {renderButtonsSection([button], {
+            className: 'mt-14 sm:justify-center',
+            isVertical: true,
+          })}
         </div>
       </div>
     </section>

package/src/components/CarouselCard/getCardWidth.tsx

@@ -0,0 +1,16 @@
+import type { SizeVersion } from '../../model/SizeVersion';
+import { getColSpan } from '../../utils/getColSpan';
+
+const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
+  normal: 'min-w-[970px]',
+  small: 'min-w-[355px]',
+};
+
+export function getCardWidth(className = '', carouselVersion = 'normal') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 4) {
+    return 'w-[375px]';
+  } else {
+    return CARD_WIDTH_MAP[carouselVersion] as string;
+  }
+}

package/src/components/CarouselCard/titleSize.mobile.tsx

@@ -0,0 +1 @@
+export const titleSize = 'XS';

package/src/components/CarouselCard/titleSize.tsx

@@ -0,0 +1 @@
+export const titleSize = 'L';

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -63,9 +63,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
 const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} />
-    ) : null}
+    {image?.icon ? <Img className={`w-8 h-8 min-w-8 mb-5`} image={image} /> : null}
   </div>
 );
 

package/src/components/Footer/Contacts.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ContactInfo } from './FooterContent';
+import { Text } from '../../ui-kit/Text/Text';
+import type { ContactGroup, ContactInfo } from './FooterContent';
 
 export interface ContactsProps {
   className?: string;
-  items?: ContactInfo[];
+  items?: ContactGroup[];
   hasButton?: boolean;
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
   <div className={className}>
-    {items?.length ? items.map(renderContact) : null}
+    {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
         version="primary"
@@ -24,16 +25,23 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
   </div>
 ));
 
-const renderContact = (item: ContactInfo, index: number) => {
-  const { type, text, description } = item;
-
-  return (
-    <div className="mb-4" key={String(index)}>
-      <div>{renderText(type, text)}</div>
-      <div className="mt-1 text-s-light text-secondary-text">{description}</div>
+const renderContactsGroup = (item: ContactGroup, i: number) => (
+  <div className="mb-6" key={String(i)}>
+    <div className="mb-4">
+      <Text size="text-l" font="font-medium">
+        {item?.title}
+      </Text>
     </div>
-  );
-};
+    <div>{item.items?.map(renderContact)}</div>
+  </div>
+);
+
+const renderContact = (item: ContactInfo, index: number) => (
+  <div className="mb-4" key={String(index)}>
+    <div>{renderText(item.type, item.text)}</div>
+    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+  </div>
+);
 
 const renderText = (type: ContactInfo['type'], text = '') => {
   switch (type) {

package/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Тип контакта
@@ -21,6 +21,15 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
+/**
+ * @title Группа контактов
+ */
+export type ContactGroup = {
+  /** @title Имя */
+  title?: string;
+  items?: ContactInfo[];
+};
+
 /**
  * @title Пункт подменю
  */

package/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,12 @@
 import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactInfo, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SubMenuItem } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
-  contacts?: ContactInfo[];
+  contacts?: ContactGroup[];
   socialMedia?: LinkCommonProps[];
   mobileApps?: LinkCommonProps[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии

package/src/components/PictureText/PictureText.fixture.mobile.tsx

@@ -0,0 +1,122 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { PictureText } from './PictureText';
+import type { PictureTextContent } from './PictureTextContent';
+
+const imageInsurance: Picture = {
+  src: 'insurance.png',
+  format: 'webp',
+  alt: 'Страховые риски и продукты',
+  size: {
+    width: 335,
+  },
+  sources: [
+    {
+      src: 'insurance.png',
+      format: 'png',
+    },
+  ],
+};
+
+const imageMonitor: Picture = {
+  src: 'monitor.png',
+  format: 'webp',
+  alt: 'Управление несколькими счетами',
+  size: {
+    width: 420,
+  },
+};
+export const PICTURE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Страхование от потери работы»',
+  benefits: [
+    {
+      type: 'default',
+      label: 'Кредит по одному документу',
+      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+      icon: { icon: 'DocumentTextIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Кредит на общих условиях',
+      description: 'До 5 млн ₽ на общих условиях получения кредита',
+      icon: { icon: 'DocumentTextIcon', iconVersion: 'white' },
+    },
+  ],
+};
+
+export const INSURANCE_TEXT: PictureTextContent = {
+  title: 'Страховые риски и продукты',
+  description: 'Покрываемые риски программы «Защита вас и ваших близких»',
+  benefits: [
+    {
+      type: 'default',
+      label: 'Телесное повреждение',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Госпитализация застрахованного',
+      description: 'Описание',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Сокращение численности работников организации и другой текст для теста длинны текста',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+    {
+      type: 'default',
+      label: 'Смерть застрахованного',
+      icon: { icon: 'ShieldTickIcon' },
+    },
+  ],
+  image: imageInsurance,
+  sum: 500000,
+};
+
+export const BENEFITS_HTML_TEXT: PictureTextContent = {
+  title: '',
+  benefits: [
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты  контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+  ],
+
+  image: imageMonitor,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...PICTURE_TEXT} />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...PICTURE_TEXT} version="secondary" />
+    </div>
+  ),
+  'insurance sum': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...INSURANCE_TEXT} />
+    </div>
+  ),
+  'insurance monthPay': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...INSURANCE_TEXT} monthLimit={25000} />
+    </div>
+  ),
+  'benefits as html': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...BENEFITS_HTML_TEXT} />
+    </div>
+  ),
+};

package/src/components/PictureText/PictureText.tsx

@@ -2,10 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
 import { renderBenefit } from './renderBenefit';
+import { style } from '../../utils/style';
+import { positionStyle } from './positionStyle';
+import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -22,11 +24,17 @@ export const PictureText = JSX<PictureTextProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper className={`relative py-12 px-24 ${className}`} version={version} {...rest}>
-      <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-      <div className={'flex justify-center gap-[122px] mt-[30px]'}>
+    <BlockWrapper className={style('relative p-default', className)} version={version} {...rest}>
+      <Headline
+        className="!p-0"
+        title={title}
+        description={description}
+        headlineVersion="M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
+        align="text-left"
+      />
+      <div className={style('flex mt-6', positionStyle)}>
         {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
-        <div className="w-[558px] m-auto">
+        <div>
           {benefits?.length ? (
             <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
           ) : null}
@@ -36,25 +44,3 @@ export const PictureText = JSX<PictureTextProps>(
     </BlockWrapper>
   ),
 );
-
-function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
-  return sum || monthLimit ? (
-    <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">
-      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number(monthLimit) > 0
-        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-        : null}
-    </div>
-  ) : null;
-}
-
-function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
-  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-
-  return (
-    <div className={`flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`}>
-      <span className="text-secondary-text text-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
-    </div>
-  );
-}

package/src/components/PictureText/positionStyle.mobile.tsx

@@ -0,0 +1 @@
+export const positionStyle = 'justify-end flex-col-reverse gap-4';

package/src/components/PictureText/positionStyle.tsx

@@ -0,0 +1 @@
+export const positionStyle = 'justify-center items-center gap-32';

package/src/components/PictureText/renderInsuranceSumMonth.tsx

@@ -0,0 +1,28 @@
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { styleInsuranceSum } from './styleInsuranceSum';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { styleValueBlock, styleValueBlockText } from './styleValueBlock';
+
+export const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) =>
+  sum || monthLimit ? (
+    <div className={style('flex mt-6', styleInsuranceSum)}>
+      {sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
+      {monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null}
+    </div>
+  ) : null;
+
+const renderValueBlock = (title: string, sum = 0, isAnotherBlock = false) => {
+  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
+  return (
+    <div className={style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle)}>
+      <Text font="font-light" size="text-l">
+        {title}
+      </Text>
+      <Text size="text-h6" color={styleValueBlockText}>
+        {toLocalNumberFormat(2)(sum)} ₽
+      </Text>
+    </div>
+  );
+};

package/src/components/PictureText/styleInsuranceSum.mobile.tsx

@@ -0,0 +1 @@
+export const styleInsuranceSum = 'flex-col gap-2';

package/src/components/PictureText/styleInsuranceSum.tsx

@@ -0,0 +1 @@
+export const styleInsuranceSum = 'bg-main-divider rounded-md px-5 py-4 gap-6';

package/src/components/PictureText/styleValueBlock.mobile.tsx

@@ -0,0 +1,2 @@
+export const styleValueBlock = 'flex-col gap-1';
+export const styleValueBlockText = '';

package/src/components/PictureText/styleValueBlock.tsx

@@ -0,0 +1,2 @@
+export const styleValueBlock = 'justify-between items-center gap-2';
+export const styleValueBlockText = 'text-primary-main';

package/src/components/RollupItem/RollupItem.fixture.mobile.tsx

@@ -44,6 +44,21 @@ export default {
         <RollupItem
           label="RollupItem label 1"
           labelIcon={labelIcon}
+          labelIconBgVersion="primary"
+          isExpanded={true}
+          block={ROLLUP_ITEM}
+          options={options}
+        />
+      </div>
+    </div>
+  ),
+  labelIconSecondary: (
+    <div>
+      <div className="list-none m-0 p-0">
+        <RollupItem
+          label="RollupItem label 1"
+          labelIcon={labelIcon}
+          labelIconBgVersion="secondary-light"
           isExpanded={true}
           block={ROLLUP_ITEM}
           options={options}

package/src/components/RollupItem/RollupItem.tsx

@@ -9,8 +9,8 @@ import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconProps } from '../../ui-kit/Icon/IconProps';
-import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import type { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import { renderRoundedIcon } from './renderRoundedIcon';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
@@ -27,6 +27,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     className = '',
     label = 'Развернуть',
     labelIcon,
+    labelIconBgVersion,
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
@@ -51,7 +52,14 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle })
+            renderFoldButton({
+              version,
+              label,
+              labelIcon,
+              labelIconBgVersion,
+              isUnfolded,
+              onToggle,
+            })
           }
         />
       </BlockWrapper>
@@ -67,6 +75,7 @@ interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
   labelIcon?: IconProps;
+  labelIconBgVersion?: IconBgVersion;
   isPadding?: boolean;
 }
 
@@ -74,6 +83,7 @@ const renderFoldButton = ({
   version,
   label: defaultLabel,
   labelIcon,
+  labelIconBgVersion,
   isUnfolded,
   onToggle,
 }: FoldButtonProps) => {
@@ -83,6 +93,7 @@ const renderFoldButton = ({
     renderPrimaryFoldButton({
       label,
       labelIcon,
+      labelIconBgVersion,
       icon: getIconName(isUnfolded),
       onToggle,
     })
@@ -97,33 +108,29 @@ const renderFoldButton = ({
 
 interface PrimaryFoldButtonProps {
   label?: string;
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
   icon?: IconName;
   onToggle?: () => void;
-  labelIcon?: Picture;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }: PrimaryFoldButtonProps) => {
-  const iconWidth = String(labelIcon?.size?.width || 24);
-  const iconHeight = String(labelIcon?.size?.height || 24);
-  const iconName = labelIcon?.icon;
-
+const renderPrimaryFoldButton = ({
+  label,
+  labelIconBgVersion,
+  icon,
+  onToggle,
+  labelIcon,
+}: PrimaryFoldButtonProps) => {
   return (
     <button
       className={style(
         'border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button',
-        iconName ? 'py-2' : 'py-5',
+        labelIcon?.icon ? 'py-2' : 'py-5',
       )}
       onClick={onToggle}
     >
       <div className="flex items-center group-hover/button:text-primary-main">
-        {iconName ? (
-          <RoundedIcon
-            name={iconName}
-            width={iconWidth}
-            height={iconHeight}
-            iconVersion={labelIcon?.iconVersion}
-          />
-        ) : null}
+        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
           <Text size={labelSize} font="font-normal">
             {label}

package/src/components/RollupItem/RollupItem.ui.json

@@ -1 +1,7 @@
-{}
+{
+  "content": {
+    "labelIcon": {
+      "ui:field": "icon"
+    }
+  }
+}

package/src/components/RollupItem/RollupItemContent.ts

@@ -1,6 +1,7 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { IconProps } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -11,5 +12,6 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
-    labelIcon?: IconProps; // TODO: только для мобильной версии
+    labelIcon?: Picture; // TODO: только для мобильной версии
+    labelIconBgVersion?: IconBgVersion;
   };

package/src/components/RollupItem/renderRoundedIcon.mobile.tsx

@@ -0,0 +1,7 @@
+import type { Picture } from '../../model/Picture';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+
+export const renderRoundedIcon = (icon?: Picture, iconBgVersion?: IconBgVersion) => (
+  <RoundedIcon {...icon} iconBgVersion={iconBgVersion} />
+);

package/src/components/RollupItem/renderRoundedIcon.tsx

@@ -0,0 +1,4 @@
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+
+export const renderRoundedIcon = (icon?: Picture, iconBgVersion?: IconBgVersion) => null;