@redneckz/wildless-cms-uni-blocks 0.7.6 → 0.7.8

package/mobile/src/components/Header/useChatBot.ts

@@ -0,0 +1,16 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { ChatBot } from './HeaderChatBotButton';
+
+const CHATBOT_NAMESPACE = 'chatbot';
+
+const CHATBOT_URL: Record<ChatBot, string> = {
+  personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
+  business: '', //TODO: add url business chat
+};
+
+export const useChatBot = (chat: ChatBot) => {
+  useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+
+  return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+};

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

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -39,17 +37,6 @@ export const PictureText = JSX<PictureTextProps>(
   ),
 );
 
-const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
-  (
-    <BenefitItem
-      key={String(i)}
-      icon={benefit.icon}
-      label={benefit.label}
-      description={benefit.description}
-      version={version}
-    />
-  );
-
 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">

package/mobile/src/components/PictureText/PictureText.ui.json

@@ -5,6 +5,16 @@
     },
     "monthLimit": {
       "ui:field": "number"
+    },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,33 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+
+export const renderBenefit =
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (version: BlockVersion) => (benefit: ComplexBenefitProps, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return (
+          <BenefitItem
+            key={String(i)}
+            icon={benefit.icon}
+            label={benefit.label}
+            description={benefit.description}
+            version={version}
+          />
+        );
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -29,7 +29,11 @@ export const renderBenefit =
           </Text>,
         ];
       case 'rte':
-        return <RichText __html={benefit.__html} />;
+        return (
+          <div className="col-span-2">
+            <RichText __html={benefit.__html} />
+          </div>
+        );
       default:
         assertUnreachable(benefit);
     }

package/mobile/src/hooks/useBool.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useBool(defaultValue = false): [
+  boolean,
+  {
+    setValue: (_: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, setValue] = useState<boolean>(defaultValue);
+
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  const toggle = useCallback(() => setValue((_) => !_), []);
+
+  return [value, { setValue, setTrue, setFalse, toggle }];
+}

package/mobile/src/icons/HeadphonesIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" name="Наушники" fill="none" viewBox="0 0 24 23">
+  <path fill="currentColor" fill-rule="evenodd"
+    d="M2.002 19.612a3.025 3.025 0 0 1-2-2.965V13.48a2.948 2.948 0 0 1 1.53-2.561v-.272C1.504 5.437 5.237.98 10.334.14c5.098-.841 10.044 2.182 11.664 7.128.124.34.058.718-.17.995a.997.997 0 0 1-1.71-.299 8.484 8.484 0 0 0-3.999-4.85 8.505 8.505 0 0 0-8.417.215 8.657 8.657 0 0 0-4.17 7.378v1.009c0 .557-.448 1.008-1 1.008-.17 0-.5.393-.5.767v3.267c0 .557.447 1.008 1 1.008.552 0 1-.451 1-1.008v-2.26c0-.556.447-1.007 1-1.007.551 0 .999.45.999 1.008v2.259c.004.99-.472 1.92-1.276 2.488a2.978 2.978 0 0 1-2.753.366Zm19.876.222a3.022 3.022 0 0 0 2.12-2.885v-2.924a3.025 3.025 0 0 0-2-2.965 2.978 2.978 0 0 0-2.74.388 3.034 3.034 0 0 0-1.259 2.486v2.017c0 .557.448 1.008 1 1.008s1-.451 1-1.008v-2.017c0-.557.447-1.008 1-1.008.552 0 1 .451 1 1.008v3.025c0 .557-.448 1.009-1 1.009a.996.996 0 0 0-.73.316c-.189.203-.287.475-.27.753a2.008 2.008 0 0 1-2 1.956h-4v-.716c0-.557-.447-1.008-1-1.008-.551 0-.999.451-.999 1.008v1.715c0 .556.448 1.008 1 1.008h4.999a4.007 4.007 0 0 0 3.91-3.166h-.03Z"
+    clip-rule="evenodd" />
+</svg>

package/mobile/src/icons/IconName.ts

@@ -3,15 +3,15 @@
 /* eslint-disable max-len, max-lines */
 
 export const IconsWithoutInversion = new Set([
-  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
+  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeadphonesIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
 ]);
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', AtmIcon = 'Банкомат', BankIcon = 'Банк', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кинотеатр', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', AtmIcon = 'Банкомат', BankIcon = 'Банк', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кинотеатр', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';

package/mobile/src/model/ButtonVersion.ts

@@ -1,6 +1,13 @@
 /**
  * @title Тема кнопки
- * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Наследуемая"]
+ * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Серая", "Наследуемая"]
  * @default primary
  */
-export type ButtonVersion = 'primary' | 'secondary' | 'white' | 'link' | 'transparent' | '';
+export type ButtonVersion =
+  | 'primary'
+  | 'secondary'
+  | 'white'
+  | 'link'
+  | 'transparent'
+  | 'gray'
+  | '';

package/mobile/src/ui-kit/BenefitItem/BenefitItemProps.ts

@@ -1,7 +1,8 @@
-import type { IconProps } from '../../model/Picture';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { IconVersion } from '../../model/IconVersion';
 import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { IconVersion } from '../../model/IconVersion';
+import type { IconProps } from '../../model/Picture';
+import { RichTextProps } from '../RichText/RichTextProps';
 
 export interface BenefitItemCommonProps {
   /** @hidden */
@@ -14,10 +15,34 @@ export interface BenefitItemCommonProps {
 
 export type BenefitItemProps = DescriptionProps & LabelProps & IconProps;
 
+/**
+ * @title Стандартный бенефит
+ */
+type DefaultBenefit = BenefitItemProps & {
+  /** @default default */
+  type: 'default';
+};
+
+/**
+ * @title Форматированный текст
+ */
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
+};
+
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export type ComplexBenefitProps = DefaultBenefit | RichText;
+
 /**
  * @title Преимущество
  */
 export type BenefitsProps = BenefitItemCommonProps & {
   /** @title Список преимуществ */
-  benefits?: BenefitItemProps[];
+  benefits?: ComplexBenefitProps[];
 };

package/mobile/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -8,6 +8,7 @@ export const buttonStyleMap: Record<ButtonVersion, string> = {
     'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
   link: '',
   transparent: '',
+  gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
   '': '',
 };
 
@@ -19,6 +20,7 @@ export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   white: DisabledStyle,
   link: '',
   transparent: '',
+  gray: DisabledStyle,
   '': '',
 };
 
@@ -30,5 +32,6 @@ export const iconStyleMap: Record<ButtonVersion, string> = {
   white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   link: '',
   transparent: '',
+  gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   '': '',
 };

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -4,6 +4,7 @@ import type { IconCompatibilityFields } from '../Icon/IconProps';
 export interface ImageContent {
   image?: Picture;
 }
+
 export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -20,7 +20,6 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`}
-      role="listitem"
       {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -37,7 +37,6 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           align,
           className,
         )}
-        role="listitem"
         version={version}
         {...rest}
       >

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -10,9 +10,12 @@
   "title": "Заголовок 1",
   "description": "Описание 1",
   "socialMedia": [
-    { "href": "https://t.me" },
-    { "href": "https://vk.com" },
-    { "href": "https://ok.ru" }
+    {
+      "href": "https://t.me",
+      "target": "_blank",
+      "version": "gray",
+      "rounded": false
+    }
   ],
   "version": "primary"
   }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,4 +1,4 @@
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
@@ -14,10 +14,25 @@ const image: Picture = {
   title: 'product-basket',
 };
 
-const socialMedia: LinkProps[] = [
-  { href: 'https://t.me' },
-  { href: 'https://vk.com' },
-  { href: 'https://ok.ru' },
+const socialMedia: ButtonWithIconProps[] = [
+  {
+    href: 'https://t.me',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
+  {
+    href: 'https://vk.com',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
+  {
+    href: 'https://ok.ru',
+    target: '_blank',
+    version: 'gray',
+    rounded: false,
+  },
 ];
 
 const items = ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'];

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -21,6 +21,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     items = [],
     socialMedia = [],
     title,
+    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -39,6 +40,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
+        version={version}
         {...rest}
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -3,6 +3,13 @@
     "items": {
       "image": {
         "ui:field": "picture"
+      }, 
+      "socialMedia": {
+        "items": {
+          "icon": {
+            "ui:field": "picture"
+          }
+        }
       }
     }
   }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,7 +1,7 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -10,14 +10,9 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
-   * @minItems 3
-   * @default [
-   * { "href": "https://t.me" },
-   * { "href": "https://vk.com" },
-   * { "href": "https://ok.ru" },
-   * ]
+   * @minItems 1
    */
-  socialMedia?: LinkCommonProps[];
+  socialMedia?: ButtonWithIconProps[];
   /**
    * @default {
    *   "format": "webp",
@@ -40,4 +35,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
+  version?: BlockVersion;
 }

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { Button } from '../../ui-kit/Button/Button';

package/src/components/Footer/Footer.tsx

@@ -20,7 +20,7 @@ export interface FooterProps extends FooterContent, UniBlockProps {}
 export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
-  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } =
+  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
@@ -37,7 +37,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
             Мобильное приложение
           </SocialMedia>
         </div>
-        <Sitemap className="pt-[3px]" items={topItems} fallback={fallback} />
+        <Sitemap className="pt-[3px]" fallback={fallback} />
       </div>
       <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} />
       <TextInformation links={documents} />

package/src/components/Footer/MediaButton.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { Picture } from '../../model/Picture';
 import type { IconVersion } from '../../model/IconVersion';
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -45,11 +46,9 @@ const ICONS_MAP: Array<{
 
 export type ButtonSize = 'default' | 'small';
 
-interface MediaButtonProps {
-  href?: string;
-  isRounded?: boolean;
-  buttonSize?: ButtonSize;
+interface MediaButtonProps extends ButtonProps {
   iconVersion?: IconVersion;
+  buttonSize?: ButtonSize;
 }
 
 const buttonSizeStyles = {
@@ -58,29 +57,32 @@ const buttonSizeStyles = {
 };
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
-    const link = useLink();
-    const { href, onClick } = link(rest);
+  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, ...rest }) => {
+    const { href, version } = rest;
 
     const { icon, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
     const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
 
-    return icon ? (
-      <a
+    return (
+      <Button
         className={style(
           'group/media flex items-center justify-center box-border',
           buttonSizeStyles[buttonSize],
-          isRounded ? 'rounded-full' : 'rounded-md',
-          'border-solid border border-main-divider hover:border-transparent',
+          rounded ? 'rounded-full' : 'rounded-md',
+          'border border-solid hover:border-transparent',
+          'group-data-primary:border-main-divider',
           'hover:bg-primary-main hover:text-black',
-          'group-data-secondary:bg-white group-data-secondary:hover:bg-secondary-hover',
+          'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
+          'group-data-gray:border-green',
+
+          buttonSizeStyles[buttonSize],
         )}
-        href={href}
         aria-label={label}
         target="_blank"
         rel="noopener noreferrer"
-        onClick={onClick}
+        version={version}
+        {...rest}
       >
         {iconWithVersion ? (
           <Img
@@ -91,7 +93,7 @@ export const MediaButton = JSX<MediaButtonProps>(
             asSVG
           />
         ) : null}
-      </a>
-    ) : null;
+      </Button>
+    );
   },
 );

package/src/components/Footer/SocialMedia.tsx

@@ -1,20 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { MediaButton, type ButtonSize } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: LinkProps[];
-  isRounded?: boolean;
+  media?: ButtonProps[];
   buttonSize?: ButtonSize;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, isRounded = false, buttonSize, children }) => (
+  ({ className = '', media, children, buttonSize }) => (
     <div className="font-sans">
       <div className={`flex gap-2.5 ${className}`}>
         {media?.map((_, index) => (
-          <MediaButton key={String(index)} isRounded={isRounded} buttonSize={buttonSize} {..._} />
+          <MediaButton key={String(index)} buttonSize={buttonSize} version={_.version} {..._} />
         ))}
       </div>
       <span className="text-s-light text-secondary-text">{children}</span>