@redneckz/wildless-cms-uni-blocks 0.3.41 → 0.3.44

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
-import type { UniBlockProps } from '../../types';
 import type { RecommendationCardTypes } from './RecommendationContent';
-import { Heading } from '../../ui-kit/Heading/Heading';
 
 export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
 
@@ -35,7 +35,12 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
               version={version}
             />
           ) : null}
-          <SocialMedia className="pt-[42px] pb-0" media={socialMedia} context={context} />
+          <SocialMedia
+            className="pt-[42px] pb-0"
+            media={socialMedia}
+            version={version}
+            context={context}
+          />
         </BaseTile>
       </section>
     );

package/mobile/src/content-page-repository/transformPicture.ts

@@ -36,7 +36,11 @@ async function transformImg(
 
   const imgPath = `${path.dirname(pagePath)}/${src}`;
   let chain = sharp(imgPath);
-  if (size) chain = chain.resize(size);
+  if (size)
+    chain = chain.resize(size?.width, size?.height, {
+      fit: sharp.fit.contain,
+      background: [0, 0, 0, 0],
+    });
   if (format) chain = chain.toFormat(format, options);
 
   const transformedSrc = transformSrc(src, transformationOptions);

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -1,13 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { projectSettings } from '../../ProjectSettings';
-import type { IconColor, IconProps } from './IconProps';
 import { IconTitleMap } from '../../icons/IconName';
-
-const svgColorsMap: Record<IconColor, string> = {
-  none: '',
-  primary: 'text-white',
-  secondary: 'text-white',
-};
+import { projectSettings } from '../../ProjectSettings';
+import type { IconProps } from './IconProps';
 
 export const Icon = JSX<IconProps>(
   ({
@@ -16,19 +10,13 @@ export const Icon = JSX<IconProps>(
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,
-    color = 'primary',
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
     if (asSVG) {
       return (
-        <svg
-          className={`${svgColorsMap[color]} ${className}`}
-          {...imgProps}
-          aria-hidden="true"
-          style={color === 'secondary' ? { filter: 'invert(1)' } : null}
-        >
+        <svg className={className} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
           <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -2,12 +2,6 @@ import type { IconName } from '../../icons/IconName';
 
 export type { IconName };
 
-/**
- * @title Цвет иконки (svg)
- * @enumNames ["Нет", "Основной", "Второстепенный"]
- */
-export type IconColor = 'none' | 'primary' | 'secondary';
-
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
   alt?: string;
@@ -19,8 +13,6 @@ export interface IconCompatibilityFields {
   height?: string;
   /** @hidden */
   asSVG?: boolean;
-  /** @hidden */
-  color?: IconColor;
 }
 
 export type IconProps = IconCompatibilityFields & {

package/mobile/src/ui-kit/List/List.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListProps, ListItemVersion } from './ListProps';
+import type { ListItemVersion, ListProps } from './ListProps';
 
 const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -40,7 +40,11 @@ const renderTab =
   };
 
 const renderIcon = (tab: Tab, isActive: boolean) => (
-  <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
-    <Img className="w-5 h-5 mr-3" image={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+  <div className="h-full mt-1">
+    <Img
+      className={`w-5 h-5 mr-3 ${isActive ? 'invert-full' : ''}`}
+      image={tab?.icon || 'CardIcon'}
+      asSVG={!isActive}
+    />
   </div>
 );

package/package.json

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

package/src/common.css

@@ -1,4 +1,5 @@
 @import '../fonts/ubuntu/ubuntu.css';
+@import '../fonts/mohave/mohave.css';
 
 html {
   scroll-behavior: smooth;
@@ -39,6 +40,10 @@ html {
 @tailwind utilities;
 
 @layer utilities {
+  .invert-full {
+    filter: invert(1);
+  }
+
   .rotate-180 {
     transform: rotate(180deg);
   }

package/src/components/BlockContent.ts

@@ -1,4 +1,5 @@
 import type { BenefitsBlockContent } from './BenefitsBlock/BenefitsBlockContent';
+import type { BonusContent } from './Bonus/BonusContent';
 import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
@@ -26,6 +27,7 @@ import type { TileContent } from './Tile/TileContent';
  */
 export type BlockContent =
   | BenefitsBlockContent
+  | BonusContent
   | ComparisonTableContent
   | ExchangeRateTileContent
   | FooterContent

package/src/components/Blocks.ts

@@ -1,5 +1,6 @@
 import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
+import { Bonus } from './Bonus/Bonus';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
@@ -30,6 +31,7 @@ import { Tile } from './Tile/Tile';
 export const Blocks = {
   Accordion,
   BenefitsBlock,
+  Bonus,
   ComparisonTable,
   CreditCalculator,
   ExchangeRateTile,

package/src/components/Bonus/Bonus.example.json

@@ -0,0 +1,12 @@
+{
+  "title": "Начисление баллов",
+  "description": "Описание",
+  "bonusItems": [
+    {
+      "name": "Плитка 1",
+      "description": "Описание плитки 1",
+      "bonusCount": 1,
+      "bonusName": "балл"
+    }
+  ]
+}

package/src/components/Bonus/Bonus.fixture.tsx

@@ -0,0 +1,39 @@
+import { context } from '../../setup-fixture';
+import { Bonus } from './Bonus';
+import type { BonusContent } from './BonusContent';
+
+export const BONUS: BonusContent = {
+  title: 'Начисление баллов',
+  description:
+    'Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
+  bonusItems: [
+    {
+      name: '5 баллов за каждые 100 ₽',
+      description:
+        'Повышенное начисление баллов за операции оплаты товаров и услуг в сети АЗС Роснефть',
+      bonusCount: 5,
+      bonusName: 'баллов',
+    },
+    {
+      name: '1 балл за каждые 100 ₽',
+      description: 'За остальные операции оплаты товаров и услуг',
+      bonusCount: 1,
+      bonusName: 'балл',
+    },
+    {
+      name: '300 приветственных баллов',
+      description:
+        'За операции оплаты товаров и услуг на общую сумму 1 000 рублей и более в течение первых двух месяцев после получения карты',
+      bonusCount: 300,
+      bonusName: 'баллов',
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Bonus className="col-span-12" context={context} {...BONUS} />
+    </div>
+  ),
+};

package/src/components/Bonus/Bonus.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { BonusContent } from './BonusContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+
+export interface BonusProps extends BonusContent, UniBlockProps {}
+
+export const Bonus = JSX<BonusProps>((props) => {
+  const { className = '', title, description, bonusItems, anchor = null } = props;
+
+  return (
+    <section className={`bg-white p-12 ${className}`} id={anchor}>
+      <div className="container">
+        {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
+        {description ? (
+          <div className="text-md font-light text-center mt-2">{description}</div>
+        ) : null}
+        <div className="flex flex-wrap w-full mt-9">
+          {bonusItems
+            ? bonusItems.map((_, i) => {
+                return (
+                  <div
+                    key={String(i)}
+                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-4 mx-2 even:mr-0 odd:ml-0 last:odd:w-full last:odd:mx-0"
+                  >
+                    <div className="flex justify-between w-full">
+                      <div className="mr-4">
+                        <div className="text-title-sm">{_.name}</div>
+                        <div className="text-md font-light mt-3 max-w-[488px]">{_.description}</div>
+                      </div>
+                      {_.bonusCount ? (
+                        <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
+                          <span className="font-serif -tracking-wider text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+                            {_.bonusCount}
+                          </span>
+                          <span className="text-[44px] bg-clip-text text-transparent bg-green-to-yellow">
+                            {_.bonusName}
+                          </span>
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                );
+              })
+            : null}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/components/Bonus/BonusContent.ts

@@ -0,0 +1,22 @@
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+
+/** @title Список плиток */
+interface BonusItems {
+  /** @title Заголовок плитки */
+  name?: string;
+  /** @title Описание плитки */
+  description?: string;
+  /** @title Количество баллов */
+  bonusCount?: number;
+  /** @title Наименование */
+  bonusName?: string;
+}
+
+/**
+ * @title Плитка
+ */
+export type BonusContent = HeadingContent &
+  DescriptionContent & {
+    bonusItems?: BonusItems[];
+  };

package/src/components/ContentPage/ContentPage.page.json

@@ -2042,8 +2042,7 @@
                   "src": "calendar/august.png",
                   "format": "webp",
                   "size": {
-                    "width": 210,
-                    "height": "auto"
+                    "width": 210
                   },
                   "alt": "Пример использования «Карты для покупок в рассрочку»"
                 }
@@ -2060,8 +2059,7 @@
                   "src": "calendar/september.png",
                   "format": "webp",
                   "size": {
-                    "width": 210,
-                    "height": "auto"
+                    "width": 210
                   },
                   "alt": "Пример использования «Карты для покупок в рассрочку»"
                 }
@@ -2072,8 +2070,7 @@
                   "src": "calendar/october.png",
                   "format": "webp",
                   "size": {
-                    "width": 210,
-                    "height": "auto"
+                    "width": 210
                   },
                   "alt": "Пример использования «Карты для покупок в рассрочку»"
                 }
@@ -2090,8 +2087,7 @@
                   "src": "calendar/november.png",
                   "format": "webp",
                   "size": {
-                    "width": 210,
-                    "height": "auto"
+                    "width": 210
                   },
                   "alt": "Пример использования «Карты для покупок в рассрочку»"
                 }
@@ -2108,8 +2104,7 @@
                   "src": "calendar/december.png",
                   "format": "webp",
                   "size": {
-                    "width": 210,
-                    "height": "auto"
+                    "width": 210
                   },
                   "alt": "Пример использования «Карты для покупок в рассрочку»"
                 }
@@ -2119,6 +2114,34 @@
         ]
       }
     },
+    {
+      "type": "Bonus",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Начисление баллов",
+        "description": "Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.",
+        "bonusItems": [
+          {
+            "name": "5 баллов за каждые 100 ₽",
+            "description": "Повышенное начисление баллов за операции оплаты товаров и услуг в сети АЗС Роснефть",
+            "bonusCount": 5,
+            "bonusName": "баллов"
+          },
+          {
+            "name": "1 балл за каждые 100 ₽",
+            "description": "За остальные операции оплаты товаров и услуг",
+            "bonusCount": 1,
+            "bonusName": "балл"
+          },
+          {
+            "name": "300 приветственных баллов",
+            "description": "Повышенное начисление баллов за операции оплаты товаров и услуг в сети АЗС Роснефть",
+            "bonusCount": 300,
+            "bonusName": "баллов"
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/Footer/Footer.tsx

@@ -26,7 +26,7 @@ export const Footer = JSX<FooterProps>(
     anchor = null,
   }) => {
     return (
-      <footer className={`px-9 pt-9 pb-8 bg-white ${className || ''}`} id={anchor}>
+      <footer className={`px-9 pt-9 pb-10 bg-white ${className || ''}`} id={anchor}>
         <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
           <Logo className={LEFT_COL_WIDTH_FULL_HD} />
           <SearchBar context={context} className="grow" />
@@ -43,7 +43,7 @@ export const Footer = JSX<FooterProps>(
           </div>
           <Sitemap className="pt-[3px]" context={context} items={topItems} />
         </div>
-        <HorizontalNavigation className="mt-24" links={relatedEnterprises} context={context} />
+        <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} context={context} />
         <TextInformation links={documents} context={context} />
       </footer>
     );

package/src/components/Footer/MediaButton.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -48,25 +49,29 @@ const ICONS_MAP: Array<{
 
 interface MediaButtonProps {
   href?: string;
+  version?: BlockVersion;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
+export const MediaButton = JSX<MediaButtonProps>(({ href, version }) => {
   const { icon, width, height, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
   if (!icon) return null;
 
+  const classes =
+    version === 'secondary'
+      ? 'text-white hover:text-primary-main hover:bg-white'
+      : 'text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main';
+
   return (
     <a
-      className="flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main"
+      className={` flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border ${classes}`}
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {icon ? (
-        <Img image={icon} width={width} height={height} asSVG className="block" color="none" />
-      ) : null}
+      {icon ? <Img image={icon} width={width} height={height} asSVG className="block" /> : null}
     </a>
   );
 });

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

@@ -1,20 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps extends UniBlockProps {
   media?: Omit<LinkProps, 'text'>[];
+  version?: BlockVersion;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
+export const SocialMedia = JSX<SocialMediaProps>(({ className, media, version, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
     <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
       {media?.map((_, index) => (
-        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+        <MediaButton
+          key={String(index)}
+          version={version}
+          {...useLink({ router, handlerDecorator }, _)}
+        />
       ))}
     </div>
   );

package/src/components/Footer/SocialMedia.tsx

@@ -1,24 +1,32 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps extends UniBlockProps {
   media?: Omit<LinkProps, 'text'>[];
+  version?: BlockVersion;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, context, children }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
-  return (
-    <div>
-      <div className={`flex gap-2.5 mb-1.5 ${className}`}>
-        {media?.map((_, index) => (
-          <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
-        ))}
+export const SocialMedia = JSX<SocialMediaProps>(
+  ({ className = '', media, version, context, children }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <div>
+        <div className={`flex gap-2.5 mb-1.5 ${className}`}>
+          {media?.map((_, index) => (
+            <MediaButton
+              key={String(index)}
+              version={version}
+              {...useLink({ router, handlerDecorator }, _)}
+            />
+          ))}
+        </div>
+        <span className="font-light text-sm text-secondary-text">{children}</span>
       </div>
-      <span className="font-light text-sm text-secondary-text">{children}</span>
-    </div>
-  );
-});
+    );
+  },
+);

package/src/components/Header/Header.mobile.tsx

@@ -19,7 +19,7 @@ export const Header = JSX<HeaderProps>(
   ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
-    const dispositions = sitemap?.dispositions
+    const dispositions = sitemap?.dispositions;
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -52,13 +52,13 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Img image="LoupeIcon" className="h-full" asSVG color="none" />
+          <Img image="LoupeIcon" className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
+          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderSubMenuObserver.ts

@@ -5,18 +5,20 @@ const isClient = !isSSR();
 export const headerSubMenuObserver = isClient
   ? new IntersectionObserver(
       (entries) => {
+        const createArrays = (selectors) =>
+          selectors.map((_) => Array.from(window.document.querySelectorAll(_)));
+
         const headerSubMenuButtonElement = window.document.querySelector(
           '[data-header-submenu-visible=toggled]',
         );
-        const headerSubMenuItems = Array.from(
-          window.document.querySelectorAll('[data-item-name=header-submenu]'),
-        );
-        const dotsHeaderSubMenuItems = Array.from(
-          window.document.querySelectorAll('[data-item-name=dots-header-submenu]'),
-        );
+        const [headerSubMenuItems, dotsHeaderSubMenuItems] = createArrays([
+          '[data-item-name=header-submenu]',
+          '[data-item-name=dots-header-submenu]',
+        ]);
+
         const visibilityList = {};
-        entries.forEach((j) => {
-          visibilityList[String(j.target.toString())] = j.isIntersecting;
+        entries.forEach((_) => {
+          visibilityList[_.target.toString()] = _.isIntersecting;
         });
         const isHeaderSubMenuButtonShow = toggleVisibilityInItems(
           visibilityList,
@@ -37,10 +39,10 @@ export const headerSubMenuObserver = isClient
 // TODO: add types
 const toggleVisibilityInItems = (visibilityList, items, className) => {
   const isReversed = className !== 'hidden';
-  return items.some((item) => {
-    const key = item.toString();
+  return items.some((_) => {
+    const key = _.toString();
     const option = isReversed ? !visibilityList[key] : visibilityList[key];
-    key in visibilityList ? item.classList.toggle(className, option) : null;
-    return isReversed ? item.classList.contains('hidden') : !item.classList.contains('hidden');
+    key in visibilityList ? _.classList.toggle(className, option) : null;
+    return isReversed ? _.classList.contains('hidden') : !_.classList.contains('hidden');
   });
 };

package/src/components/Header/HeaderTop.tsx

@@ -7,7 +7,6 @@ export interface HeaderTopProps {
   onClick: () => void;
   bgColor?: BgColorVersion;
 }
-
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
     <div className="flex items-center">
@@ -18,6 +17,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
       >
         <Img
           image={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+          className="text-primary-text"
           width="24"
           height="24"
           asSVG

package/src/components/LinkDocs/LinkDocs.tsx

@@ -35,7 +35,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     anchor = null,
   }) => {
     return (
-      <section className={`font-sans text-primary-text p-12 bg-white ${className}`} id={anchor}>
+      <section className={`font-sans text-primary-text p-[50px] bg-white ${className}`} id={anchor}>
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -5,7 +5,7 @@ import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
-    iconClassName="mr-3.5 min-w-6 min-h-6 text-primary-text"
+    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
     textClassName="self-center font-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}