@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.33

package/src/components/CreditCalculator/CreditCalculator.example.json

@@ -3,17 +3,23 @@
     {
       "title": "Вкладка 1",
       "description": "Описание",
-      "icon": "CardIcon"
+      "icon": {
+        "icon": "CardIcon"
+      }
     },
     {
       "title": "Вкладка 2",
       "description": "Описание",
-      "icon": "ChartSquareIcon"
+      "icon": {
+        "icon": "ChartSquareIcon"
+      }
     },
     {
       "title": "Вкладка 3",
       "description": "Описание",
-      "icon": "DiscountShapeIcon"
+      "icon": {
+        "icon": "DiscountShapeIcon"
+      }
     }
   ]
 }

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -7,19 +7,19 @@ const TABS: CreditCalculatorTab[] = [
     title: 'Кредит',
     description: 'Ставка от 6% до 7 лет',
     directoryName: 'credit-calculator-data',
-    icon: 'CardIcon',
+    icon: { icon: 'CardIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 4% до 7 лет',
     directoryName: 'credit-calculator-data1',
-    icon: 'ChartSquareIcon',
+    icon: { icon: 'ChartSquareIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 3% до 6 лет',
     directoryName: 'credit-calculator-data2',
-    icon: 'DiscountShapeIcon',
+    icon: { icon: 'DiscountShapeIcon' },
   },
 ];
 

package/src/components/CreditCalculator/defaultTabs.ts

@@ -5,18 +5,18 @@ export const DEFAULT_TABS: CreditCalculatorTab[] = [
     title: 'Кредит',
     description: 'Ставка от 6% до 7 лет',
     directoryName: 'credit-calculator-data',
-    icon: 'CardIcon',
+    icon: { icon: 'CardIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 4% до 7 лет',
     directoryName: 'credit-calculator-data1',
-    icon: 'ChartSquareIcon',
+    icon: { icon: 'ChartSquareIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 3% до 6 лет',
     directoryName: 'credit-calculator-data2',
-    icon: 'DiscountShapeIcon',
+    icon: { icon: 'DiscountShapeIcon' },
   },
 ];

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
 import { formatCurrency } from './formatCurrency';
 
@@ -36,7 +36,7 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
     <tr key={code} className="pb-1">
       <td className="pt-4">
         <div className="flex items-center">
-          {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
+          {code ? <Img image={{ icon: CURRENCY_ICONS_MAP[code] }} width="24" height="24" /> : null}
           <span className="text-m-title-md ml-2">{code}</span>
         </div>
       </td>

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 
 interface CurrentLocationProps {
   className?: string;
@@ -10,7 +10,7 @@ interface CurrentLocationProps {
 export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
     <div className={`flex text-sm ${className}`}>
-      <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
+      <Img className="min-w-fit" image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
       <div className="ml-3 font-light">
         {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
         {distance ? (

package/src/components/Footer/Footer.mobile.tsx

@@ -10,7 +10,7 @@ import { TextInformation } from './TextInformation';
 
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { getAccordionItems } from '../../utils/getAccordionItems';
 
@@ -59,7 +59,7 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
-      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/src/components/Footer/FooterContent.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Тип контакта
@@ -32,7 +32,7 @@ export type SocialMedia = Omit<LinkProps, 'text'>;
  */
 export interface SubMenuItem extends LinkProps {
   /** @title Иконка подменю */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**

package/src/components/Footer/MediaButton.tsx

@@ -1,23 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { Picture } from '../../model/Picture';
 
 const ICONS_MAP: Array<{
   origins: string[];
-  icon: IconName;
+  icon: Picture;
   label: string;
   width: string;
   height: string;
 }> = [
   {
     origins: ['t.me', 'telegram.org'],
-    icon: 'TelegramIcon',
+    icon: { icon: 'TelegramIcon' },
     label: 'Телеграм',
     width: '20px',
     height: '16px',
   },
-  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+  {
+    origins: ['vk.com'],
+    icon: { icon: 'VKIcon' },
+    label: 'ВКонтакте',
+    width: '24px',
+    height: '12px',
+  },
+  {
+    origins: ['ok.ru'],
+    icon: { icon: 'OkIcon' },
+    label: 'Одноклассники',
+    width: '12px',
+    height: '20px',
+  },
 ];
 
 interface MediaButtonProps {
@@ -38,9 +50,9 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
       target="_blank"
       rel="noopener noreferrer"
     >
-      {Icon && (
-        <Icon name={icon} width={width} height={height} asSVG className="block" color="none" />
-      )}
+      {icon ? (
+        <Img image={icon} width={width} height={height} asSVG className="block" color="none" />
+      ) : null}
     </a>
   );
 });

package/src/components/Footer/SocialMedia.tsx

@@ -12,7 +12,7 @@ export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context })
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <div className={`flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
+    <div className={`flex items-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
       {media?.map((_, index) => (
         <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
       ))}

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

@@ -20,7 +20,7 @@ const buttonPrimary: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  icon: 'BankIcon',
+  icon: { icon: 'BankIcon' },
 };
 const link: ButtonCommonProps = {
   href: '/credit-cards',

package/src/components/Gallery/Gallery.fixture.tsx

@@ -26,7 +26,7 @@ const buttonPrimaryIcon: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  icon: 'BankIcon',
+  icon: { icon: 'BankIcon' },
 };
 
 const defaultItems = [

package/src/components/Gallery/Gallery.mobile.tsx

@@ -1,14 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockVersion } from '../../model/BlockVersion';
+import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import type { ListOrientation } from '../../model/ListOrientation';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -75,7 +74,7 @@ function renderButton(button) {
   return (
     <Button
       className="mt-3"
-      appendLeft={button?.icon && <Icon name={button?.icon} width="24px" height="24px" asSVG />}
+      appendLeft={button?.icon && <Img image={button?.icon} width="24px" height="24px" asSVG />}
       {...button}
     />
   );

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { GalleryCard, GalleryItem } from './GalleryContent';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
@@ -33,7 +32,7 @@ function renderButton(button) {
   return (
     <Button
       className="mt-6 w-full"
-      appendLeft={button.icon && <Icon name={button.icon} width="24px" height="24px" asSVG />}
+      appendLeft={button.icon && <Img image={button.icon} width="24px" height="24px" asSVG />}
       {...button}
     />
   );

package/src/components/Header/HeaderBurger.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { DispositionItem } from './HeaderContent';
@@ -21,14 +21,14 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Icon name="CloseIcon" width="24" height="24" asSVG />
+          <Img image="CloseIcon" width="24" height="24" asSVG />
         </button>
         <button
           onClick={getCity}
           className="flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
         >
-          <Icon
-            name="GeolocationIcon"
+          <Img
+            image="GeolocationIcon"
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"
@@ -49,7 +49,7 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
       {icon ? (
-        <Icon className="text-primary-main pr-1" name={icon} width="24" height="24" asSVG />
+        <Img className="text-primary-main pr-1" image={icon} width="24" height="24" asSVG />
       ) : null}
       <span className="pl-0.5 font-medium">{text}</span>
     </a>

package/src/components/Header/HeaderContent.ts

@@ -1,13 +1,13 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Пункт подменю
  */
 export interface SubMenuItem extends LinkProps {
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**
@@ -16,7 +16,7 @@ export interface SubMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { IconName } from '../../icons/IconName';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../icons/IconName';
+import { Img } from '../../ui-kit/Img/Img';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
@@ -52,16 +52,16 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Icon name="LoupeIcon" className="h-full" asSVG color="none" />
+          <Img image="LoupeIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
-          <Icon name="ProfileIcon" className="h-full" asSVG color="none" />
+          <Img image="ProfileIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
+          <Img image={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderTop.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
 
 export interface HeaderTopProps {
@@ -16,8 +16,8 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
         onClick={onClick}
         aria-label="Открыть меню"
       >
-        <Icon
-          name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+        <Img
+          image={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"
           height="24"
           asSVG

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,7 +1,9 @@
 {
   "title": "Список документов",
   "subtitle": "Описание",
-  "icon": "DocIcon",
+  "icon": {
+    "icon": "DocIcon"
+  },
   "documents": [
     {
       "text": "Документ №1",

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -24,13 +24,18 @@ export default {
         className="col-span-12"
         context={context}
         {...linkDocsContentExample}
-        icon="GlassIcon"
+        icon={{ icon: 'GlassIcon' }}
       />
     </div>
   ),
   'no icon': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} icon="" />
+      <LinkDocs
+        className="col-span-12"
+        context={context}
+        {...linkDocsContentExample}
+        icon={{ icon: '' }}
+      />
     </div>
   ),
 };

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -13,7 +13,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     context,
     title,
     subtitle,
-    icon = 'DocIconMonoColor',
+    icon = { icon: 'DocIconMonoColor' },
     documents,
     orientation = 'vertical',
     hasBorder = true,

package/src/components/LinkDocs/LinkDocs.tsx

@@ -30,7 +30,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     subtitle,
     align,
     documents,
-    icon = 'DocIcon',
+    icon = { icon: 'DocIcon' },
     columnsMode = 'double',
     anchor = null,
   }) => {

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,7 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { ListOrientation } from '../../model/ListOrientation';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Отображение списка
@@ -29,7 +29,7 @@ export interface LinkDocsContent {
   /** @title Описание */
   subtitle?: string;
   /** @title Название иконки */
-  icon?: IconName;
+  icon?: Picture;
   /** @title Список */
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;

package/src/components/LinkDocs/LinkDocsList.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { LinkDocsListItem } from './LinkDocsListItem';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+import type { Picture } from '../../model/Picture';
 
 export interface LinkDocsListProps {
   className?: string;
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export const LinkDocsList = JSX<LinkDocsListProps>(

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
 import type { LinkDocsItem } from './LinkDocsContent';
+import type { Picture } from '../../model/Picture';
 
 export interface LinkDocsListItemProps {
   className?: string;
   doc: LinkDocsItem;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
@@ -21,7 +21,7 @@ export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
     return (
       <a className={className} role="link" {...linkProps}>
         {icon ? (
-          <Icon className={iconClassName} name={icon} width="24px" height="24px" asSVG />
+          <Img className={iconClassName} image={icon} width="24px" height="24px" asSVG />
         ) : null}
         {text ? (
           <span className={textClassName}>

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../icons/IconName';
 import type { LinkDocsItem } from './LinkDocsContent';
+import type { Picture } from '../../model/Picture';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsVerticalListProps {
   hasBorder?: boolean;
   documents?: LinkDocsItem[];
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -7,13 +7,17 @@
     {
       "aboveText": "Загрузите в",
       "text": "App Store",
-      "icon": "AppleIcon",
+      "icon": {
+        "icon": "AppleIcon"
+      },
       "version": "secondary"
     },
     {
       "aboveText": "Доступно в",
       "text": "Google Play",
-      "icon": "PlayMarketIcon",
+      "icon": {
+        "icon": "PlayMarketIcon"
+      },
       "version": "secondary"
     }
   ],

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -16,7 +16,7 @@ export default {
           {
             aboveText: 'Загрузите в',
             text: 'App Store',
-            icon: 'AppleIcon',
+            icon: { icon: 'AppleIcon' },
             href: '#',
             asSVG: true,
             version: 'secondary',
@@ -24,7 +24,7 @@ export default {
           {
             aboveText: 'Доступно в',
             text: 'Google Play',
-            icon: 'PlayMarketIcon',
+            icon: { icon: 'PlayMarketIcon' },
             href: '#',
             asSVG: true,
             version: 'secondary',

package/src/components/PictureText/PictureText.example.json

@@ -12,11 +12,15 @@
   "benefits": [
     {
       "label": "Преимущество №1",
-      "icon": "DocumentTextIcon"
+      "icon": {
+        "icon": "DocumentTextIcon"
+      }
     },
     {
       "label": "Преимущество №2",
-      "icon": "DocumentTextIcon"
+      "icon": {
+        "icon": "DocumentTextIcon"
+      }
     }
   ]
 }

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

@@ -20,12 +20,12 @@ export const PICTURE_TEXT: PictureTextContent = {
     {
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: 'DocumentTextIcon',
+      icon: { icon: 'DocumentTextIcon' },
     },
     {
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: 'DocumentTextIcon',
+      icon: { icon: 'DocumentTextIcon' },
     },
   ],
   image,

package/src/components/PictureText/PictureText.tsx

@@ -4,7 +4,6 @@ import type { PictureTextContent } from './PictureTextContent';
 
 import { BlockVersion } from '../../model/BlockVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
@@ -47,15 +46,15 @@ export const PictureText = JSX<PictureTextProps>(
 function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex flex-row mb-8">
-      {benefit.icon && (
-        <Icon
+      {benefit.icon ? (
+        <Img
           className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
-          name={benefit.icon}
+          image={benefit.icon}
           width="48"
           height="48"
           asSVG
         />
-      )}
+      ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit.label && (
           <div