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

package/src/components/PictureText/renderInsuranceSumMonth.tsx

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

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

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

package/src/components/PictureText/styleInsuranceSum.tsx

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

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

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

package/src/components/PictureText/styleValueBlock.tsx

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

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

@@ -0,0 +1,142 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ProductGallery } from './ProductGallery';
+
+const percentImage: Picture = {
+  src: '3-6-percent.png',
+  format: 'webp',
+  size: {
+    width: 338,
+    height: 420,
+  },
+  alt: 'Ставка от 3,6% годовых',
+};
+
+const creditCard: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+const items = [
+  'Потребительский кредит по специальной процентной ставке',
+  'Получите деньги без залога и поручительства',
+  'Кредитный лимит до 5 млн рублей',
+];
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'primary',
+  },
+];
+
+const buttonsSecondary: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'white',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ProductGallery
+        className="col-span-12"
+        slides={[
+          {
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+              headlineVersion: 'L',
+              items,
+              buttons,
+              image: percentImage,
+            },
+          },
+          {
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headlineVersion: 'L',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+          {
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headlineVersion: 'L',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+          {
+            productBlock: {
+              title: 'Карты Unionpay',
+              headlineVersion: 'L',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductGallery
+        className="col-span-12"
+        version={'secondary'}
+        slides={[
+          {
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              headlineVersion: 'L',
+              items,
+              buttons: buttonsSecondary,
+              image: percentImage,
+            },
+          },
+          {
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headlineVersion: 'L',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+          {
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headlineVersion: 'L',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+          {
+            productBlock: {
+              title: 'Карты Unionpay',
+              headlineVersion: 'L',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { ProductGalleryContent } from './ProductGalleryContent';
+
+export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
+
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className = '', slides = [], ...rest }) => {
+    const galleryBlocks = slides.map((s) => s.productBlock);
+
+    return (
+      <BlockWrapper
+        className={`box-border py-6 overflow-hidden relative w-100 mb-6 ${className}`}
+        {...rest}
+      >
+        <SwipeListControl gap={0} padding={0}>
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
+        </SwipeListControl>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderProductBlock = (block: ProductBlockInnerContent, i: number) => (
+  <ProductBlockInner
+    key={String(i)}
+    className="z-10 px-5 group-data-secondary:text-white"
+    {...block}
+  />
+);

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

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

package/src/components/RollupItem/RollupItem.tsx

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

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

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

package/src/components/RollupItem/RollupItemContent.ts

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

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

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

package/src/components/RollupItem/renderRoundedIcon.tsx

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

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) : _),
+    (_) => (format ? _.toFormat(format, { ...options, nearLossless: true }) : _),
   );
 
 const pipe = (...operations: Array<(chain: Sharp) => Promise<Sharp> | Sharp>) =>

package/src/icons/ChevronLeft.svg

@@ -0,0 +1,3 @@
+<svg title="Стрелка 'Вправо'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7071 6.29289C15.0976 6.68342 15.0976 7.31658 14.7071 7.70711L10.4142 12L14.7071 16.2929C15.0976 16.6834 15.0976 17.3166 14.7071 17.7071C14.3166 18.0976 13.6834 18.0976 13.2929 17.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L13.2929 6.29289C13.6834 5.90237 14.3166 5.90237 14.7071 6.29289Z" fill="currentColor"/>
+</svg>

package/src/icons/IconName.ts

@@ -8,6 +8,7 @@ export const IconsWithoutInversion = new Set([
   'BriefcaseIcon',
   'CardWithGemIcon',
   'CarIcon',
+  'ChevronLeft',
   'CinemaIcon',
   'ClientIcon',
   'ClockIcon',
@@ -77,6 +78,7 @@ export enum IconMap {
   CardWithGemIcon = 'CardWithGemIcon',
   CarIcon = 'CarIcon',
   ChartSquareIcon = 'ChartSquareIcon',
+  ChevronLeft = 'ChevronLeft',
   CinemaIcon = 'CinemaIcon',
   ClientIcon = 'ClientIcon',
   ClockIcon = 'ClockIcon',
@@ -190,6 +192,7 @@ export enum IconTitleMap {
   CardWithGemIcon = 'Карта с драгоценностями',
   CarIcon = 'Машина',
   ChartSquareIcon = 'Деньги внутри кошелька',
+  ChevronLeft = "Стрелка 'Вправо'",
   CinemaIcon = 'Кинотеатр',
   ClientIcon = 'Клиент',
   ClockIcon = 'Часы',
@@ -280,7 +283,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Вправо\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
 export type IconName =
@@ -312,6 +315,7 @@ export type IconName =
   | 'CardWithGemIcon'
   | 'CarIcon'
   | 'ChartSquareIcon'
+  | 'ChevronLeft'
   | 'CinemaIcon'
   | 'ClientIcon'
   | 'ClockIcon'

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

@@ -1,34 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
+import { style } from '../../utils/style';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
+import { labelSize } from './labelSize';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { Text } from '../Text/Text';
-import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
-export const BenefitItem = JSX<BenefitGeneralProps>(
-  ({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (
-    <div className={style('flex gap-5', description ? 'items-start' : 'items-center', className)}>
+export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
+  const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
+  const listItemAlign = description ? 'items-start' : 'items-center';
+
+  return (
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
+        <div className={getBenefitIconBgStyle(benefitsVersion)}>
           <Img
             className="w-6 h-6"
             image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
           />
         </div>
       ) : null}
-      <div>
+      <div className="gap-0.5">
         {label ? (
-          <Text size="text-h6" color="text-primary-text group-data-secondary:text-white">
+          <Text color="text-primary-text group-data-secondary:text-white" size={labelSize}>
             {label}
           </Text>
         ) : null}
         {description ? (
           <Paragraph
-            size="text-m-light"
+            font="font-light"
+            size="text-m"
             color="text-secondary-text group-data-secondary:text-white"
           >
             {description}
@@ -36,17 +40,17 @@ export const BenefitItem = JSX<BenefitGeneralProps>(
         ) : null}
       </div>
     </div>
-  ),
-);
-
-function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
-  let bgColorStyle = 'bg-primary-main text-black';
+  );
+});
 
-  if (version === 'secondary') {
-    bgColorStyle = 'bg-white/30 text-black';
-  } else if (benefitsVersion === 'normal') {
-    bgColorStyle = 'bg-secondary-light text-primary-main';
-  }
+  function getBenefitIconBgStyle(benefitsVersion: IconVersion) {
+          const bgColorStyle =
+          benefitsVersion === 'normal'
+          ? 'bg-secondary-light text-primary-main'
+          : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
 
-  return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
-}
+          return style(
+          'w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon',
+          bgColorStyle,
+          );
+        }

package/src/ui-kit/BenefitItem/borderRadius.mobile.tsx

@@ -0,0 +1 @@
+export const borderRadius = 'rounded-md';

package/src/ui-kit/BenefitItem/labelSize.mobile.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-l';

package/src/ui-kit/BenefitItem/labelSize.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-h6';

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -15,7 +15,13 @@ export const renderButtonsSection = (
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
-    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className)}>
+    <div
+      className={style(
+        'flex',
+        isVertical ? 'flex-col gap-2 justify-items-stretch' : 'flex-wrap gap-4',
+        className,
+      )}
+    >
       {buttons.map(renderButton(buttonClassName))}
     </div>
   ) : null;
@@ -30,7 +36,7 @@ const renderButton =
     return text || icon?.icon ? (
       <Button
         key={index ? String(index) : ''}
-        className={buttonClassName}
+        className={style('basis-full sm:basis-auto', buttonClassName)}
         appendLeft={renderButtonIcon({ ...icon, iconVersion })}
         appendRight={renderButtonIcon({ ...iconRight, iconVersion })}
         version={version}

package/src/ui-kit/Heading/Heading.fixture.mobile.tsx

@@ -7,22 +7,22 @@ export default {
     <div className="p-2 w-full h-full">
       <div className="bg-slate-100 w-full h-full">
         <div className="pb-3">
-          <Heading headingType="h1" title="Копите в нескольких валютах" />
+          <Heading headingType="h1" as="h1" title="Копите в нескольких валютах" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h2" title="Копите в нескольких валютах" />
+          <Heading headingType="h2" as="h2" title="Копите в нескольких валютах" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h3" title="Дополнительные документы" />
+          <Heading headingType="h3" as="h3" title="Дополнительные документы" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h4" title="Вклады в любой валюте" />
+          <Heading headingType="h4" as="h4" title="Вклады в любой валюте" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h5" title="Вклады в любой валюте" />
+          <Heading headingType="h5" as="h5" title="Вклады в любой валюте" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h6" title="Вклады в любой валюте" />
+          <Heading headingType="h6" as="h6" title="Вклады в любой валюте" />
         </div>
       </div>
     </div>

package/src/ui-kit/Heading/Heading.fixture.tsx

@@ -7,22 +7,22 @@ export default {
     <div className="p-2 w-full h-full">
       <div className="bg-slate-100 w-full h-full">
         <div className="pb-3">
-          <Heading headingType="h1" title="«Своя» дебетовая карта" />
+          <Heading headingType="h1" as="h1" title="«Своя» дебетовая карта" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h2" title="Рефинансирование кредитов" />
+          <Heading headingType="h2" as="h2" title="Рефинансирование кредитов" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h3" title="Потребительский кредит" />
+          <Heading headingType="h3" as="h3" title="Потребительский кредит" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h4" title="Курсы обмена валют" />
+          <Heading headingType="h4" as="h4" title="Курсы обмена валют" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h5" title="Своё Родное" />
+          <Heading headingType="h5" as="h5" title="Своё Родное" />
         </div>
         <div className="pb-3">
-          <Heading headingType="h6" title="Своё Родное" />
+          <Heading headingType="h6" as="h6" title="Своё Родное" />
         </div>
       </div>
     </div>

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { HeadingProps, HeadingType } from './HeadingProps';
+import { headingTag } from './headingTag';
 
 const styles: Record<HeadingType, string> = {
   h0: 'text-h0', // 56
@@ -12,7 +13,11 @@ const styles: Record<HeadingType, string> = {
 };
 
 export const Heading = JSX<HeadingProps>(
-  ({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (
-    <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
-  ),
+  ({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
+    const Tag = headingTag(as);
+
+    return (
+      <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
+    );
+  },
 );