@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.0

package/src/icons/ClientIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" title="Клиент" viewBox="0 0 24 25" fill="none"><path stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.68 4.124c.48.71.76 1.56.76 2.48-.01 2.4-1.9 4.35-4.28 4.43-.1-.01-.22-.01-.33 0-2.21-.07-4-1.76-4.24-3.92-.29-2.57 1.82-4.95 4.4-4.95M6.99 14.724c-2.42 1.62-2.42 4.26 0 5.87 2.75 1.84 7.26 1.84 10.01 0 2.42-1.62 2.42-4.26 0-5.87-2.73-1.83-7.24-1.83-10.01 0Z"/></svg>

package/src/icons/IconName.ts

@@ -4,9 +4,12 @@
 export const IconsWithoutInversion = new Set([
   'ActualBalanceIcon',
   'AirPlaneIcon',
+  'BagIcon',
+  'BriefcaseIcon',
   'CardWithGemIcon',
   'CarIcon',
   'CinemaIcon',
+  'ClientIcon',
   'ClockIcon',
   'ComfortableCompIcon',
   'CreditCardsIcon',
@@ -51,12 +54,16 @@ export enum IconMap {
   AirPlaneIcon = 'AirPlaneIcon',
   AppleIcon = 'AppleIcon',
   ArrowDownIcon = 'ArrowDownIcon',
+  ArrowDownSolidIcon = 'ArrowDownSolidIcon',
   ArrowLeftIcon = 'ArrowLeftIcon',
   ArrowRightIcon = 'ArrowRightIcon',
   ArrowTopRightIcon = 'ArrowTopRightIcon',
   ArrowUpIcon = 'ArrowUpIcon',
+  ArrowUpSolidIcon = 'ArrowUpSolidIcon',
   AtmIcon = 'AtmIcon',
+  BagIcon = 'BagIcon',
   BankIcon = 'BankIcon',
+  BriefcaseIcon = 'BriefcaseIcon',
   BuildingIcon = 'BuildingIcon',
   BurgerIcon = 'BurgerIcon',
   Calendar2Icon = 'Calendar2Icon',
@@ -71,6 +78,7 @@ export enum IconMap {
   CarIcon = 'CarIcon',
   ChartSquareIcon = 'ChartSquareIcon',
   CinemaIcon = 'CinemaIcon',
+  ClientIcon = 'ClientIcon',
   ClockIcon = 'ClockIcon',
   CloseIcon = 'CloseIcon',
   ComfortableCompIcon = 'ComfortableCompIcon',
@@ -159,12 +167,16 @@ export enum IconTitleMap {
   AirPlaneIcon = 'Самолёт',
   AppleIcon = 'Лого «Apple»',
   ArrowDownIcon = "Стрелка 'Вниз'",
+  ArrowDownSolidIcon = "Стрелка сплошная 'Вниз'",
   ArrowLeftIcon = "Стрелка 'Влево'",
   ArrowRightIcon = "Стрелка 'Вправо'",
   ArrowTopRightIcon = "Стрелка 'Вверх-право'",
   ArrowUpIcon = "Стрелка 'Вверх'",
+  ArrowUpSolidIcon = "Стрелка сплошная 'Вверх'",
   AtmIcon = 'Банкомат',
+  BagIcon = 'Сумка',
   BankIcon = 'Банк',
+  BriefcaseIcon = 'BriefcaseIcon',
   BuildingIcon = 'Здание с деревом',
   BurgerIcon = 'Бургер',
   Calendar2Icon = 'Календарь 2',
@@ -179,6 +191,7 @@ export enum IconTitleMap {
   CarIcon = 'Машина',
   ChartSquareIcon = 'Деньги внутри кошелька',
   CinemaIcon = 'Кинотеатр',
+  ClientIcon = 'Клиент',
   ClockIcon = 'Часы',
   CloseIcon = 'Крестик',
   ComfortableCompIcon = 'Кресло',
@@ -267,7 +280,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 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 =
@@ -276,12 +289,16 @@ export type IconName =
   | 'AirPlaneIcon'
   | 'AppleIcon'
   | 'ArrowDownIcon'
+  | 'ArrowDownSolidIcon'
   | 'ArrowLeftIcon'
   | 'ArrowRightIcon'
   | 'ArrowTopRightIcon'
   | 'ArrowUpIcon'
+  | 'ArrowUpSolidIcon'
   | 'AtmIcon'
+  | 'BagIcon'
   | 'BankIcon'
+  | 'BriefcaseIcon'
   | 'BuildingIcon'
   | 'BurgerIcon'
   | 'Calendar2Icon'
@@ -296,6 +313,7 @@ export type IconName =
   | 'CarIcon'
   | 'ChartSquareIcon'
   | 'CinemaIcon'
+  | 'ClientIcon'
   | 'ClockIcon'
   | 'CloseIcon'
   | 'ComfortableCompIcon'

package/src/services/sitemap/SitemapData.ts

@@ -6,7 +6,7 @@ import type { IconProps, Picture } from '../../model/Picture';
  * @title Ссылка
  * @required ["text", "href"]
  */
-export interface TopMenuItemProps extends LinkProps {
+export interface TopMenuItemProps extends LinkProps, IconProps {
   /** @hidden */
   items?: LinkProps[];
 }

package/src/{components/Filtration/FiltrationContent.ts → ui-kit/BaseFiltration/BaseFiltrationContent.ts}

@@ -46,15 +46,42 @@ export type StringArray = {
   };
 };
 
+export type NumberValue = {
+  title?: Title;
+  /**
+   * @default number
+   * @hidden
+   */
+  type?: 'number';
+};
+
+export type NumberRange = {
+  title?: Title;
+  /**
+   * @default object
+   * @hidden
+   */
+  type?: 'object';
+  /** @title */
+  properties: {
+    /** @title Минимум */
+    min?: NumberValue;
+    /** @title Максимум */
+    max?: NumberValue;
+  };
+};
+
 export type FiltrationSchema = {
-  /** @title Тип недвижимости */
-  propertyType?: StringArray;
-  /** @title Этап строительства */
-  stage?: StringArray;
-  /** @title Категории */
-  categories?: StringArray;
-  /** @title Дополнительно */
-  extraOptions?: StringArray;
+  /** @title Валюта */
+  currency?: StringArray;
+  /** @title Опции */
+  options?: StringArray;
+  /** @title Выплата процентов */
+  percents?: StringArray;
+  /** @hidden */
+  sum?: NumberValue;
+  /** @hidden */
+  period?: NumberRange;
 };
 
 /**
@@ -72,7 +99,7 @@ export type ResetButton = {
  */
 export type NotFound = TitleProps & DescriptionProps;
 
-export interface FiltrationInnerContent {
+export interface BaseFiltrationInnerContent {
   /** @title Название сворачивающейся кнопки */
   label?: string;
   /**
@@ -83,11 +110,3 @@ export interface FiltrationInnerContent {
   resetButton?: ResetButton;
   notFound?: NotFound;
 }
-
-/**
- * @title Фильтрация
- */
-export interface FiltrationContent extends FiltrationInnerContent {
-  /** @title Параметры фильтрации */
-  filtrationSchema?: FiltrationSchema;
-}

package/src/{components/Filtration/FiltrationInner.tsx → ui-kit/BaseFiltration/BaseFiltrationInner.tsx}

@@ -2,24 +2,24 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
 import type { IconName } from '../../icons/IconName';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { checkShouldRenderBlock } from './checkShouldRenderBlock';
-import type { FiltrationInnerContent, NotFound } from './FiltrationContent';
+import { BaseFiltrationInnerContent, NotFound } from '../BaseFiltration/BaseFiltrationContent';
+import { checkShouldRenderBlock } from '../BaseFiltration/checkShouldRenderBlock';
+import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
+import { Foldable } from '../Foldable/Foldable';
+import { FoldableSection } from '../Foldable/FoldableSection';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { Text } from '../Text/Text';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
 
-interface FiltrationInnerProps extends FiltrationInnerContent, UniBlockProps {
+interface BaseFiltrationInnerProps extends BaseFiltrationInnerContent, UniBlockProps {
   filtrationState?: Record<string, any>;
 }
 
-export const FiltrationInner = JSX<FiltrationInnerProps>(
+export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
   ({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
     const blocksToRender =
       block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];

package/src/ui-kit/BaseFiltration/checkShouldRenderBlock.ts

@@ -0,0 +1,49 @@
+import { isEmpty } from '../../utils/isEmpty';
+
+const isSingularFieldMatch =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
+
+const isMultipleFieldMatch =
+  <P extends Partial<Record<string, any[]>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    pattern[key]?.some((_) => target[key]?.includes(_));
+
+const isNumberFieldMatch =
+  <P extends Partial<Record<string, number>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+
+const isValueInRange =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
+      naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
+
+export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Record<string, any>) =>
+  Object.entries(pattern)
+    .map(([key, subPattern]) => {
+      if (typeof subPattern === 'number') {
+        return isNumberFieldMatch(key, pattern);
+      }
+
+      if (typeof subPattern === 'object') {
+        if ('min' in subPattern && 'max' in subPattern) {
+          return isValueInRange(key, pattern);
+        }
+      }
+
+      return Array.isArray(subPattern)
+        ? isMultipleFieldMatch(key, pattern)
+        : isSingularFieldMatch(key, pattern);
+    })
+    .every((predicate) => predicate(target));
+
+const naturalNumber = (n: any) => Number(n || 0);

package/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -0,0 +1,75 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm';
+import type { VNode } from '../../model/VNode';
+import { Button } from '../Button/Button';
+import { SlideCheckboxGroup } from '../SlideCheckboxGroup/SlideCheckboxGroup';
+import { Text } from '../Text/Text';
+import type {
+  BaseFiltrationInnerContent,
+  NumberRange,
+  NumberValue,
+  StringArray,
+  StringEnum,
+} from './BaseFiltrationContent';
+
+type SchemaItem = StringArray | StringEnum | NumberRange | NumberValue;
+type FiltrationSchema = Record<string, SchemaItem>;
+
+interface RenderFiltrationFormProps {
+  field: FormFieldRegisterer<any>;
+  reset: () => void;
+  filtrationSchema: FiltrationSchema;
+  resetButton?: BaseFiltrationInnerContent['resetButton'];
+  children?: VNode;
+}
+
+export const renderFiltrationForm = ({
+  field,
+  reset,
+  filtrationSchema,
+  resetButton,
+  children,
+}: RenderFiltrationFormProps) => (
+  <form className="flex justify-between bg-white p-9 mb-1">
+    <div className="flex gap-11">
+      {children}
+      {Object.entries(filtrationSchema).map(renderFormItem(field))}
+    </div>
+    {resetButton ? (
+      <div>
+        <Button className="w-72 ml-3" onClick={reset} {...resetButton} />
+      </div>
+    ) : null}
+  </form>
+);
+
+const renderFormItem =
+  (field: FormFieldRegisterer<any>) =>
+  ([key, item]: [string, SchemaItem]) => {
+    const type = item?.type;
+
+    switch (type) {
+      case 'array':
+        return renderCheckboxes(key, field)(item);
+      default:
+        return null;
+    }
+  };
+
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
+  const options =
+    item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+    [];
+
+  return (
+    <div key={key}>
+      {item?.title ? (
+        <div className="mb-4">
+          <Text size="text-m" font="font-light" color="text-secondary-text">
+            {item.title}
+          </Text>
+        </div>
+      ) : null}
+      <SlideCheckboxGroup items={options} multiple {...field<string, string[] | undefined>(key)} />
+    </div>
+  );
+};

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

@@ -1,24 +1,17 @@
 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 { 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>((props) => {
-  const {
-    className = '',
-    icon,
-    label,
-    description,
-    version = 'primary',
-    benefitsVersion = 'normal',
-  } = props;
-  const listItemAlign = description ? 'items-start' : 'items-center';
-
-  return (
-    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
+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)}>
       {icon ? (
         <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
           <Img
@@ -27,19 +20,24 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
           />
         </div>
       ) : null}
-      <div className="gap-0.5">
+      <div>
         {label ? (
-          <div className="text-h6 text-primary-text group-data-secondary:text-white">{label}</div>
+          <Text size="text-h6" color="text-primary-text group-data-secondary:text-white">
+            {label}
+          </Text>
         ) : null}
         {description ? (
-          <div className="text-m-light text-secondary-text group-data-secondary:text-white">
+          <Paragraph
+            size="text-m-light"
+            color="text-secondary-text group-data-secondary:text-white"
+          >
             {description}
-          </div>
+          </Paragraph>
         ) : null}
       </div>
     </div>
-  );
-});
+  ),
+);
 
 function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
   let bgColorStyle = 'bg-primary-main text-black';

package/src/ui-kit/BlockWrapper.tsx

@@ -20,15 +20,7 @@ export const blockStyles: Record<BlockVersion, string> = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({
-    className = '',
-    version = 'primary',
-    isTheme = true,
-    block,
-    tag = 'section',
-    role,
-    children,
-  }) => {
+  ({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);

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

@@ -15,7 +15,7 @@ export const renderButtonsSection = (
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
-    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
+    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className)}>
       {buttons.map(renderButton(buttonClassName))}
     </div>
   ) : null;

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -19,7 +19,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
     return (
       <button
         className={style(
-          'flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text',
+          'flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text',
           disabled
             ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
             : 'bg-primary-main text-white hover:bg-primary-hove',

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

@@ -2,6 +2,7 @@ import type { IconName } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
+export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
 
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
@@ -20,3 +21,7 @@ export type IconProps = IconCompatibilityFields & {
   name?: IconName;
   iconVersion?: IconVersion;
 };
+
+export interface RoundedIconProps extends IconProps {
+  iconBgVersion?: IconBgVersion;
+}

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

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from './Icon';
+import type { IconBgVersion, RoundedIconProps } from './IconProps';
+import { style } from '../../utils/style';
+
+const iconBgStyles: Record<IconBgVersion, string> = {
+  primary: 'bg-main-divider',
+  secondary: 'bg-white/30',
+  'secondary-light': 'bg-secondary-light',
+};
+
+export const RoundedIcon = JSX<RoundedIconProps>(({ iconBgVersion = 'primary', ...rest }) => (
+  <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
+    <Icon {...rest} />
+  </div>
+));

package/{mobile/src/components/LinkList/linkListContentExample.ts → src/ui-kit/LinkList/LinkList.fixture.tsx}

@@ -1,7 +1,9 @@
-import type { LinkListContent } from './LinkListContent';
+import '../../setup-fixture';
+import { LinkList } from './LinkList';
+import { LinkListProps } from './LinkListProps';
 
-export const linkDocsContentExample: LinkListContent = {
-  documents: [
+export const props: LinkListProps = {
+  items: [
     { text: 'target self', href: '/abc1/cooldoc/', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf/', target: '_blank' },
     { text: 'GlassIcon', href: '/abc3/map/' },
@@ -20,3 +22,11 @@ export const linkDocsContentExample: LinkListContent = {
     },
   ],
 };
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <LinkList className="col-span-12" {...props} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { LinkListProps } from './LinkListProps';
+import { linkListStyles } from './linkListStyles';
+
+export const LinkList = JSX<LinkListProps>(({ className = '', items }) =>
+  items?.length ? (
+    <ul className={style('flex flex-col p-0', linkListStyles, className)}>
+      {items.map(renderLinkListItem)}
+    </ul>
+  ) : null,
+);
+
+const renderLinkListItem = (item: LinkProps, i: number) => {
+  const { text, ...linkProps } = item;
+
+  return (
+    <li key={`list_item_${String(i)}`} className="list-none mb-4 sm:mb-6 sm:last:mb-0">
+      <a className="hover:text-primary-main sm:font-light" role="link" {...linkProps}>
+        {text ? text : null}
+      </a>
+    </li>
+  );
+};

package/src/ui-kit/LinkList/LinkListProps.tsx

@@ -0,0 +1,6 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+export interface LinkListProps {
+  items?: LinkProps[];
+  className?: string;
+}

package/src/ui-kit/LinkList/linkListStyles.mobile.ts

@@ -0,0 +1 @@
+export const linkListStyles = '';

package/src/ui-kit/LinkList/linkListStyles.ts

@@ -0,0 +1 @@
+export const linkListStyles = 'text-s text-secondary-text';

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { ListItem } from './ListItem';
 import type { ListItemSize, ListProps } from './ListProps';
 
@@ -8,28 +9,26 @@ const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   L: 'text-h5',
 };
 
-const ITEM_INDENT_MAP = {
+const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
   S: 'ml-2',
   M: 'ml-3',
   L: 'ml-4',
 };
 
 export const List = JSX<ListProps>(
-  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+  ({ className, hasIndent, isDotted, items, listItemSize = 'M' }) =>
     items?.length ? (
       <section
-        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
-          TEXT_SIZE_MAP[listItemSize]
-        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        className={style(
+          'flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
+          TEXT_SIZE_MAP[listItemSize],
+          hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
+          className,
+        )}
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem
-            key={String(i)}
-            className={itemClassName}
-            isDotted={isDotted}
-            size={listItemSize}
-          >
+          <ListItem key={String(i)} isDotted={isDotted} size={listItemSize}>
             {item}
           </ListItem>
         ))}

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { ListItemSize } from './ListProps';
 
 /**
@@ -12,18 +13,21 @@ export interface ListItemProps {
 }
 
 const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-  M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-  S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+  L: 'w-1.5 h-1.5 mr-4',
+  M: 'w-1.5 h-1.5 mr-3',
+  S: 'w-1 h-1 mr-2',
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, size = 'M' }) => (
-    <div className={`font-sans flex items-baseline ${className}`} role="listitem">
+  ({ className, isDotted = true, children, size = 'M' }) => (
+    <div className={style('font-sans flex', className)} role="listitem">
       {isDotted ? (
-        <div>
+        <div className="shrink-0">
           <div
-            className={`rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}`}
+            className={style(
+              'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+              DOT_SIZE_MAP[size],
+            )}
           />
         </div>
       ) : null}

package/src/ui-kit/List/ListProps.ts

@@ -16,7 +16,5 @@ export type ListProps = ListContent &
     className?: string;
     /** @title Отступ */
     hasIndent?: boolean;
-    /** @hidden */
-    itemClassName?: string;
     listItemSize?: ListItemSize;
   };