@redneckz/wildless-cms-uni-blocks 0.12.8 → 0.12.10

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,3 +1,9 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import { Img } from '../../ui-kit/Img/Img';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -5,13 +11,7 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
-import { benefitImageStyles } from './benefitImageStyles';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
-import { style } from '../../utils/style';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { defaultIconSize } from './defaultIconSize';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -20,10 +20,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
     <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div
-          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
-          role="list"
-        >
+        <div className="flex flex-wrap w-full sm:justify-center mt-m gap-xl" role="list">
           {benefitList.map(renderBenefit)}
         </div>
       ) : null}
@@ -34,19 +31,18 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    className="flex gap-s items-center md:basis-1/2 md:max-w-[400px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (
-      <Img
-        className={style(
-          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
-          benefitImageStyles,
-        )}
-        image={benefit.icon}
+      <RoundedIcon
+        className="shrink-0"
+        defaultIconSize={defaultIconSize}
+        iconBgVersion={benefit?.iconBgVersion || ''}
+        {...benefit?.icon}
       />
     ) : null}
-    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.icon?.src ? <Img className="shrink-0" image={benefit.icon} /> : null}
     {benefit?.label ? (
       <div className="sm:h-full">
         <Heading headingType="h6">{benefit.label}</Heading>

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -3,6 +3,7 @@ import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Пункты описания
@@ -36,6 +37,7 @@ export type BenefitBlockItemProps = LabelProps &
   IconProps & {
     /** @title Описание */
     description?: DescriptionDef;
+    iconBgVersion?: IconBgVersion;
   };
 
 /**

package/src/components/BenefitsBlock/defaultIconSize.mobile.tsx

@@ -0,0 +1 @@
+export const defaultIconSize = 56;

package/src/components/BenefitsBlock/defaultIconSize.tsx

@@ -0,0 +1 @@
+export const defaultIconSize = 44;

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { ApplicationForm } from './ApplicationForm/ApplicationForm';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
@@ -28,9 +30,9 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
-import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
+  ApplicationForm,
   ButtonsBlock,
   BonusBenefitsBlock,
   CardTransfer,

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

@@ -15,7 +15,7 @@ const bonusBenefits: BonusBenefit[] = [
   },
   {
     title:
-      'Заполни заявление и укажи реквизиты «Молодёжной карты». Узнать реквизиты ты можешь после получения карты в офисе, мобильном приложении (нажми на карту → действия → информация → реквизиты карты) или на сайте Банка в личном кабинете',
+      'Заполни заявление и укажи реквизиты «Молодёжной карты». Узнать реквизиты ты можешь после получения карты в офисе, мобильном приложении',
     icon: { icon: 'CarIcon', iconVersion: 'normal' },
   },
   {

package/src/components/BonusBenefitsBlock/renderBonusBenefits.mobile.tsx

@@ -5,8 +5,8 @@ import { renderBonusBenefit } from './renderBonusBenefit';
 
 export const renderBonusBenefits = (
   bonusBenefits: BonusBenefit[],
-  columnsCount: ColumnsCount,
-  cardTextAlign: AlignType,
+  _columnsCount: ColumnsCount,
+  _cardTextAlign: AlignType,
 ) => (
   <SwipeListControl>
     {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -99,11 +99,9 @@ const renderAdditionalDescription = (additionalDescription?: string) =>
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={style(
-        'max-w-[308px] mt-2 text-s',
-        version === 'primary' ? '!text-secondary-text' : '',
-      )}
+      className={style('max-w-[308px] mt-2', version === 'primary' ? '!text-secondary-text' : '')}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
+      listItemSize="S"
     />
   ) : null;

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -35,5 +35,6 @@
         }
       ]
     }
-  ]
+  ],
+  "align": "text-center"
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -21,7 +21,16 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
+  ({
+    className = '',
+    title,
+    align = 'text-center',
+    icon,
+    isHighlighting = false,
+    button,
+    cardCells = [],
+    ...rest
+  }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -34,7 +43,9 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
       >
         {isHighlighting ? renderHitIcon() : null}
         {renderIconBlock(icon)}
-        {title ? <Heading className="text-center pt-2" headingType="h5" title={title} /> : null}
+        {title ? (
+          <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
+        ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
         {cardCells.length ? (
           <Foldable

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -1,4 +1,5 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import { AlignProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -16,7 +17,8 @@ export type TariffsCardCellProps = HeadlineCommonProps & {
  */
 export type CarouselTariffsCardContent = UniBlockContent &
   TitleProps &
-  IconProps & {
+  IconProps &
+  AlignProps & {
     /** @title Выделить карточку */
     isHighlighting?: boolean;
     /** @title Кнопка */

package/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -2,7 +2,6 @@ import { VNode } from '../../model/VNode';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { TariffsCardCellProps } from './CarouselTariffsCardContent';
-import { descriptionSize } from './descriptionSize';
 
 export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
   const { title, description, buttons } = cell;
@@ -18,7 +17,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
       ) : null}
       {description ? (
         <div className="mt-1">
-          <Text size={descriptionSize} color="text-primary-text">
+          <Text size="text-xl" color="text-primary-text">
             {description}
           </Text>
         </div>

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { LinkCommonProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -8,6 +9,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
+import { findIconByHref } from './findIconByHref';
 import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
@@ -20,7 +22,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
   const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
-  const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
+  const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
@@ -34,13 +36,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
       <SocialMedia className="mb-4" media={socialMedia} />
-      <Button
-        className="w-full mb-4"
-        text="Google Play"
-        version="secondary"
-        href="/"
-        target="_blank"
-      />
+      {mobileApps?.map(renderButton)}
       <HorizontalNavigation
         className="pt-4 pb-7 border-y border-main-divider"
         title={horizontalNavigationTitle}
@@ -50,3 +46,18 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     </BlockWrapper>
   );
 });
+
+const renderButton = ({ href = '/' }: LinkCommonProps, i: number) => {
+  const { label } = findIconByHref(href);
+
+  return (
+    <Button
+      key={String(i)}
+      className="w-full mb-4"
+      text={label}
+      version="secondary"
+      href={href}
+      target="_blank"
+    />
+  );
+};

package/src/components/Footer/MediaButton.tsx

@@ -5,43 +5,7 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { buttonStylesWithText } from './buttonStylesWithText';
-
-const ICONS_MAP: Array<{
-  origins: string[];
-  iconMapped: Picture;
-  label: string;
-}> = [
-  {
-    origins: ['t.me', 'telegram.org'],
-    iconMapped: { icon: 'TelegramIcon' },
-    label: 'Телеграм',
-  },
-  {
-    origins: ['vk.com'],
-    iconMapped: { icon: 'VKIcon' },
-    label: 'ВКонтакте',
-  },
-  {
-    origins: ['ok.ru'],
-    iconMapped: { icon: 'OkIcon' },
-    label: 'Одноклассники',
-  },
-  {
-    origins: ['apps.apple.com'],
-    iconMapped: { icon: 'AppleIcon' },
-    label: 'App Store',
-  },
-  {
-    origins: ['play.google.com'],
-    iconMapped: { icon: 'PlayMarketIcon' },
-    label: 'Google Play',
-  },
-  {
-    origins: ['youtube.com'],
-    iconMapped: { icon: 'YoutubeIcon' },
-    label: 'Youtube',
-  },
-];
+import { findIconByHref } from './findIconByHref';
 
 export type ButtonSize = 'default' | 'small';
 
@@ -53,8 +17,7 @@ export const MediaButton = JSX<MediaButtonProps>(
   ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
     const { href, version, text = '' } = rest;
 
-    const { iconMapped, label } =
-      ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const { iconMapped, label } = findIconByHref(href);
 
     const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 

package/src/components/Footer/findIconByHref.ts

@@ -0,0 +1,4 @@
+import { IconsMapItem, ICONS_MAP } from './iconsMap';
+
+export const findIconByHref = (href?: string): IconsMapItem =>
+  ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};

package/src/components/Footer/iconsMap.ts

@@ -0,0 +1,40 @@
+import { LabelProps } from '../../model/HeadlineType';
+import { Picture } from '../../model/Picture';
+
+export type IconsMapItem = LabelProps & {
+  origins?: string[];
+  iconMapped?: Picture;
+};
+
+export const ICONS_MAP: Array<IconsMapItem> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    iconMapped: { icon: 'TelegramIcon' },
+    label: 'Телеграм',
+  },
+  {
+    origins: ['vk.com'],
+    iconMapped: { icon: 'VKIcon' },
+    label: 'ВКонтакте',
+  },
+  {
+    origins: ['ok.ru'],
+    iconMapped: { icon: 'OkIcon' },
+    label: 'Одноклассники',
+  },
+  {
+    origins: ['apps.apple.com'],
+    iconMapped: { icon: 'AppleIcon' },
+    label: 'App Store',
+  },
+  {
+    origins: ['play.google.com'],
+    iconMapped: { icon: 'PlayMarketIcon' },
+    label: 'Google Play',
+  },
+  {
+    origins: ['youtube.com'],
+    iconMapped: { icon: 'YoutubeIcon' },
+    label: 'Youtube',
+  },
+];

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

@@ -65,6 +65,9 @@ export default {
             version: 'secondary',
           },
           button2,
+          button2,
+          button1,
+          button2,
         ]}
       />
     </div>

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -50,17 +50,17 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               />
             ) : null
           }
-          backImage={image?.src ? <Img image={image} /> : null}
-          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 3 })}
+          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
         >
           {renderDescription(description)}
-          <div className="flex flex-1 gap-s items-center">
+          <div className="flex flex-1 flex-wrap gap-s items-center">
             {qr?.src ? (
               <div className={style('flex justify-center bg-white rounded-md', containerStyle)}>
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
             {renderList(items)}
+            {image?.src ? <Img image={image} /> : null}
           </div>
         </BaseTile>
       </BlockWrapper>

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

@@ -15,6 +15,9 @@
           "ui:widget": "hidden"
         }
       }
+    },
+    "__html": {
+      "ui:widget": "html"
     }
   }
 }

package/src/components/ProductBlock/ProductBlock.ui.json

@@ -8,6 +8,16 @@
         "ui:field": "icon"
       }
     },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    },
     "__html": {
       "ui:widget": "html"
     }

package/src/components/ProductTile/ProductTile.ui.json

@@ -9,6 +9,9 @@
           "ui:widget": "hidden"
         }
       }
+    },
+    "__html": {
+      "ui:widget": "html"
     }
   }
 }

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

@@ -52,18 +52,4 @@ export default {
       </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}
-        />
-      </div>
-    </div>
-  ),
 };

package/src/components/RollupItem/RollupItem.tsx

@@ -14,7 +14,6 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { labelSize } from './labelSize';
 import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
@@ -130,10 +129,10 @@ const renderPrimaryFoldButton = ({
       )}
       onClick={onToggle}
     >
-      <div className="flex items-center group-hover/button:text-primary-main">
+      <div className="flex items-center group-hover/button:text-primary-main gap-3">
         {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
-          <Text size={labelSize} font="font-normal">
+          <Text size="text-h6" font="font-normal">
             {label}
           </Text>
         ) : null}

package/src/components/TextBlock/TextBlock.tsx

@@ -14,16 +14,19 @@ export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 export const TextBlock = JSX<TextBlockProps>(
   ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (
     <BlockWrapper
-      className={style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className)}
+      className={style(
+        'flex gap-3 sm:gap-4 bg-white group-data-secondary:bg-primary-main/10',
+        className,
+      )}
       {...rest}
     >
       {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
       {iconVersion === 'big' ? renderImage(image) : null}
-      <div className="flex flex-col w-fit gap-3">
+      <div className="flex flex-col w-fit gap-1 sm:gap-2">
         {title ? (
           <Text
             size="text-l"
-            font="font-medium"
+            font="font-normal"
             color="text-primary-text group-data-secondary:text-white"
           >
             {title}
@@ -46,10 +49,14 @@ const renderIcon = () => (
 );
 
 const renderImage = (image?: Picture) =>
-  image?.src ? <Img className="h-fit" image={image} /> : null;
+  image?.src ? <Img className="h-fit flex-shrink-0" image={image} /> : null;
 
 const renderDescription = (description: string) => (
-  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
+  <Paragraph
+    size="text-s"
+    font="font-light"
+    color="text-secondary-text group-data-secondary:text-white"
+  >
     {description}
   </Paragraph>
 );

package/src/components/Tile/Tile.ui.json

@@ -1,5 +1,15 @@
 {
   "content": {
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    },
     "__html": {
       "ui:widget": "html"
     }

package/src/content-page-repository/transformImg.ts

@@ -77,7 +77,7 @@ const computeTransformationChain = ({
   pipe(
     resizeImg(isPictureSizeEmpty(size) ? containerSize : size),
     alignImg({ containerSize, alignment }),
-    (_) => (format ? _.toFormat(format, { ...options, nearLossless: true }) : _),
+    (_) => (format ? _.toFormat(format, { ...options, lossless: true }) : _),
   );
 
 const pipe = (...operations: Array<(chain: Sharp) => Promise<Sharp> | Sharp>) =>

package/src/model/ContentPageDef.ts

@@ -1,5 +1,3 @@
-import type { BlockVersion } from './BlockVersion';
-
 /**
  * @title Цветовая палитра
  * @enumNames ["", "Частным клиентам", "Бизнес клиентам", "Экосистема Своё"]
@@ -9,10 +7,9 @@ export type ColorPalette = '' | 'pc' | 'bc' | 'eo';
 export interface BaseBlockDef extends Slot {
   type?: string;
   content?: Record<string, any>;
-  version?: BlockVersion;
   hidden?: boolean;
   anchor?: string;
-  labels?: string[];
+  labels?: string[]; // TODO: Remove and refactor group tabs
 }
 
 export interface BlockDef extends BaseBlockDef {

package/src/model/HeadlineType.ts

@@ -36,16 +36,17 @@ export type LabelProps = {
   label?: string;
 };
 
+export type AlignProps = {
+  /** @title Выравнивание заголовка */
+  align?: TextAlign;
+};
+
 export type AdditionalDescriptionProps = {
   /** @title Дополнительное описание */
   additionalDescription?: string;
 };
 
-export type HeadlineCommonProps = TitleProps &
-  DescriptionProps & {
-    /** @title Выравнивание заголовка */
-    align?: TextAlign;
-  };
+export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps & {};
 
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;

package/src/model/JSXBlock.ts

@@ -8,7 +8,7 @@ import type { VNode } from './VNode';
 
 /**
  * @title Внутренний отступ
- * @enumNames ["По умолчанию", "Большой", "Средний", "Маленький", "Нулевой"]
+ * @enumNames ["По умолчанию", "Большой", "Средний", "Маленький", "Оч. маленький", "Нулевой"]
  */
 export type UniBlockPadding = '' | 'p-lg' | 'p-m' | 'p-s' | 'p-xs' | 'p-0';
 

package/src/ui-kit/CookiePopup/CookiePopup.tsx

@@ -37,8 +37,8 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
 
   return isOpened ? (
     <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">
-      <div className="bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-        <div className="flex-1">
+      <div className="bg-white m-5 p-5 sm:m-6 sm:p-6 rounded-md flex sm:items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+        <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует
             <LinkWrapper
@@ -61,7 +61,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
             персональных данных».
           </Paragraph>
         </div>
-        <div className="w-24 flex justify-end">
+        <div className="ml-3 sm:ml-0 w-24 flex justify-end">
           <CloseButton className="bg-main-gray rounded-md" onClick={handleClose} />
         </div>
       </div>

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

@@ -6,12 +6,13 @@ export type { IconName };
 /**
  * @title Цвет фона иконки
  * @enumNames [
+ *    "По умолчанию",
  *    "Основной",
  *    "Второстепенный",
- *    "Второстепенный светлый"
+ *    "Прозрачный"
  * ]
  */
-export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
+export type IconBgVersion = '' | 'primary' | 'secondary' | 'opacity';
 
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */