@redneckz/wildless-cms-uni-blocks 0.13.3 → 0.13.5

package/src/components/Carousel/CarouselContent.ts

@@ -1,5 +1,11 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
 
+/**
+ * @title Размер карточек
+ * @enumNames ["Нормальный", "Большой"]
+ */
+export type CardSizeMode = 'normal' | 'big';
+
 /**
  * @title Карусель
  */
@@ -17,4 +23,5 @@ export type CarouselContent = UniBlockContent & {
   isGap?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
+  cardSize?: CardSizeMode;
 };

package/src/components/Carousel/renderCardHighlight.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
+
+interface CardHighlightProps {
+  className?: string;
+  text?: string;
+}
+
+export const renderCardHighlight = ({ className, text = 'ХИТ' }: CardHighlightProps = {}) => (
+  <div
+    className={style(
+      'w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+      className,
+    )}
+  >
+    <Icon iconVersion="black" name="HeartIcon" width="24" height="24" />
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      {text}
+    </Paragraph>
+  </div>
+);

package/src/components/Carousel/renderCarouselCards.tsx

@@ -0,0 +1,74 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { BlockDef } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
+import { renderCardHighlight } from './renderCardHighlight';
+import type { CardSizeMode } from './CarouselContent';
+
+const cardBaseStyle = 'relative h-full';
+
+const CARD_SIZE_MAP: Record<CardSizeMode, string> = {
+  normal: 'sm:min-w-96',
+  big: 'sm:min-w-[515px]',
+};
+
+export const renderCarouselCards = ({
+  noCardBorder,
+  activeIndex,
+  cardSize = 'normal',
+  ...rest
+}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number; cardSize?: CardSizeMode }) => {
+  const { blocks: childBlocks } = rest.block || {};
+  const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+
+  return renderChildren({
+    ...rest,
+    renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) => (
+      <div className={cardWrapperStyle(block, { someCardsHighlighted })}>
+        {renderBlock(block, options, {
+          className: cardStyle(block, {
+            someCardsHighlighted,
+            showBorder: !noCardBorder,
+            cardSize,
+          }),
+          blockIndex,
+          isActive: blockIndex === activeIndex,
+        })}
+        {isCardHighlighted(block)
+          ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+          : null}
+      </div>
+    ),
+  });
+};
+
+const cardWrapperStyle = (
+  _: BlockDef | undefined,
+  { someCardsHighlighted }: { someCardsHighlighted?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'),
+  );
+
+const cardStyle = (
+  _: BlockDef | undefined,
+  {
+    someCardsHighlighted,
+    showBorder,
+    cardSize = 'normal',
+  }: { someCardsHighlighted?: boolean; showBorder?: boolean; cardSize?: CardSizeMode },
+) =>
+  style(
+    cardBaseStyle,
+    'min-w-80',
+    CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
+    showBorder &&
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+  );
+
+const isCardHighlighted = (_: BlockDef | undefined) =>
+  _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;

package/src/components/Carousel/visibleItemCountStyle.mobile.tsx

@@ -0,0 +1 @@
+export const visibleItemCountStyle = 'auto';

package/src/components/Carousel/visibleItemCountStyle.tsx

@@ -0,0 +1 @@
+export const visibleItemCountStyle = 0;

package/src/components/CarouselCard/CarouselCard.tsx

@@ -23,7 +23,9 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
-        <div className={style(layerBaseStyle, 'relative p-5xl bg-white border-green-light')}>
+        <div
+          className={style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light')}
+        >
           <Headline
             title={title}
             description={description}
@@ -32,7 +34,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
             isEmbedded={true}
           />
           {renderButtonsSection([button], {
-            className: 'mt-6xl sm:justify-center',
+            className: 'mt-m sm:mt-6xl sm:justify-center',
             isVertical: true,
           })}
         </div>

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.fixture.tsx

@@ -17,27 +17,27 @@ const five: Picture = {
 const cardsList = [
   {
     parameter: 'IR',
-    parameterDesccription: 'cтрана эмитента',
+    parameterDescription: 'cтрана эмитента',
   },
   {
     parameter: 'RU',
-    parameterDesccription: 'страна риска',
+    parameterDescription: 'страна риска',
   },
   {
     parameter: '09.03.2022',
-    parameterDesccription: 'дата погашения',
+    parameterDescription: 'дата погашения',
   },
   {
     parameter: 'Ba3',
-    parameterDesccription: 'рейтинг MOODY’S',
+    parameterDescription: 'рейтинг MOODY’S',
   },
   {
     parameter: 'BB-',
-    parameterDesccription: 'рейтинг FITCH',
+    parameterDescription: 'рейтинг FITCH',
   },
   {
     parameter: 'Borets Finance Designated Activity Company',
-    parameterDesccription: 'эмитент',
+    parameterDescription: 'эмитент',
   },
 ];
 

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -6,7 +6,7 @@ const link = {
   text: 'Аудиторские заключения',
   href: '#',
 };
-const links = Array(24).fill(link);
+const links = Array(10).fill(link);
 
 const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
   один из крупнейших банков в России. Был основан в 2000 году в целях развития
@@ -24,13 +24,13 @@ export default {
     <div className="container grid grid-cols-12">
       <CarouselLinks
         links={links}
-        className="col-span-12"
         title="О Банке"
         description={description}
         additionalDescription={additionalDescription}
         maxLinksCount={MAX_LINKS_COUNT}
         version="secondary"
-        block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+        className="col-span-12"
+        block={{ type: 'Carousel', blocks: new Array(1).fill(link).flat() }}
       />
     </div>
   ),

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -53,16 +53,16 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="@container-normal sm:w-2/3 w-full p-0 sm:p-2xl"
+      className="@container-normal sm:w-2/3 w-full p-0 sm:p-xs"
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
-      showDots={true}
+      showDots={false}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl')}
+          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
         >
           {links
             .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)

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

@@ -89,7 +89,7 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   description: 'Описание',
   align: 'text-left',
   icon,
-  items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
+  items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
   version: 'secondary',
   socialMedia: socialMediaWithoutText,
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -9,6 +7,8 @@ import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
@@ -27,20 +27,20 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('relative group-data-gray:bg-main-divider/50 space-y-m', className)}
-        defaultPadding="p-6xl"
+        className={style('relative group-data-gray:bg-main-divider/50', className)}
+        defaultPadding="p-3xl"
         {...rest}
       >
-        <LinkWrapper href={href} target={target}>
+        <LinkWrapper href={href} target={target} className={'space-y-lg'}>
           <Headline
             title={title}
             description={description}
-            headlineVersion="S"
+            headlineVersion="XS"
             isEmbedded={true}
             align={align}
           />
           {items.length ? (
-            <List className="flex flex-col gap-xs" items={items} listItemSize="S" />
+            <List className="flex flex-col gap-xs" items={items} listItemSize="XS" />
           ) : null}
           {renderIcon(icon)}
           {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}

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

@@ -1,10 +1,10 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 const imageMonth: Picture = {
   src: 'monthly-payment.png',
@@ -67,11 +67,6 @@ export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
 
 const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD} />;
 
-const CAROUSEL_TARIFFS_CARD_HIT = (
-  <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD_HIT} />
-);
-
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
-  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -66,11 +66,6 @@ export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
 
 const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD} />;
 
-const CAROUSEL_TARIFFS_CARD_HIT = (
-  <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD_HIT} />
-);
-
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
-  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -10,10 +10,8 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import { getPaddingStyle } from './getPaddingStyle';
 import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
@@ -21,27 +19,13 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({
-    className = '',
-    title,
-    align = 'text-center',
-    icon,
-    isHighlighting = false,
-    button,
-    cardCells = [],
-    ...rest
-  }) => {
+  ({ className = '', title, align = 'text-center', icon, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper
-        className={style('relative flex flex-col', className)}
-        defaultPadding={getPaddingStyle(isHighlighting)}
-        {...rest}
-      >
-        {isHighlighting ? renderHitIcon() : null}
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
         {renderIconBlock(icon)}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
@@ -64,9 +48,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="basis-full self-center">
-    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-  </div>
+  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
 );
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
@@ -83,12 +65,3 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
     />
   </button>
 );
-
-const renderHitIcon = (): VNode => (
-  <div className="absolute -top-6 -right-4 h-14 w-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-    <Icon iconVersion="black" name="HeartIcon" width="24" height="24" />
-    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
-      ХИТ
-    </Paragraph>
-  </div>
-);

package/src/components/Headline/headlineVersionStyles.ts

@@ -43,7 +43,7 @@ export const headlineVersionStyles: Record<
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l',
+    descriptionSize: 'text-m',
     descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -3,13 +3,13 @@ import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import type { MobileAppTileContent } from './MobileAppTileContent';
 import { renderDescription } from './renderDescription';
 import { renderList } from './renderList';
+import { buttonsConditionStyle } from './buttonsConditionStyle';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
@@ -51,7 +51,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             ) : null
           }
           rightImage={image?.src ? <Img className="hidden lg:block" image={image} /> : null}
-          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
+          buttons={buttonsConditionStyle(buttons)}
         >
           {renderDescription(description)}
           <div className="flex flex-1 flex-wrap gap-m items-center">

package/src/components/MobileAppTile/buttonsConditionStyle.mobile.tsx

@@ -0,0 +1,12 @@
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { style } from '../../utils/style';
+
+export const buttonsConditionStyle = (buttons: ButtonProps[]) => {
+  const buttonsLengthMoreThanTwo = buttons.length > 2;
+
+  return renderButtonsSection(buttons, {
+    className: style(buttonsLengthMoreThanTwo ? 'w-full' : 'flex-nowrap'),
+    isVertical: buttonsLengthMoreThanTwo,
+  });
+};

package/src/components/MobileAppTile/buttonsConditionStyle.tsx

@@ -0,0 +1,5 @@
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+export const buttonsConditionStyle = (buttons: ButtonProps[]) =>
+  renderButtonsSection(buttons, { isVertical: false });

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

@@ -22,6 +22,7 @@ export const ROLLUP_ITEM: BlockDef = {
     { type: 'TextBlock', content: TEXT_BLOCK },
   ],
 };
+
 const labelIcon: Picture = { icon: 'BriefcaseIcon' };
 
 export default {
@@ -29,9 +30,11 @@ export default {
     <div>
       <RollupItem
         {...ROLLUP_ITEM.content}
-        version="secondary"
         block={ROLLUP_ITEM}
+        labelIcon={labelIcon}
+        labelIconBgVersion="primary"
         options={options}
+        version="secondary"
       />
       <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
     </div>
@@ -39,11 +42,11 @@ export default {
   labelIcon: (
     <div>
       <RollupItem
+        block={ROLLUP_ITEM}
+        isExpanded={true}
         label="RollupItem label 1"
         labelIcon={labelIcon}
         labelIconBgVersion="primary"
-        isExpanded={true}
-        block={ROLLUP_ITEM}
         options={options}
       />
     </div>

package/src/components/RollupItem/RollupItem.tsx

@@ -2,33 +2,36 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 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 { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
+import type { Picture } from '../../model/Picture';
+import { renderRoundedIcon } from './renderRoundedIcon';
 
-export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
+interface RollupItemProps extends RollupItemContent, UniBlockProps {
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+}
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
+    isExpanded,
+    isFoldButtonOnTop = true,
     label = 'Развернуть',
     labelIcon,
     labelIconBgVersion,
-    isExpanded,
-    isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
   }) => {

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

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

package/src/components/RollupItem/RollupItemContent.ts

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

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -17,7 +17,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-xs text-s-light text-secondary-text">
+      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
       <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">

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

@@ -46,7 +46,7 @@ export const BaseTile = JSX<BaseTileProps>(
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]',
+            'flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]',
             leftImage ? '' : 'grow',
           )}
         >
@@ -66,9 +66,20 @@ export const BaseTile = JSX<BaseTileProps>(
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
-) =>
-  image ? (
-    <div className={style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}>
+) => {
+  //TODO Спорное решение
+  const fullWidth = image?.props?.image?.size?.width > 400;
+
+  return image ? (
+    <div
+      className={style(
+        'flex-shrink-0',
+        fullWidth ? 'w-full @xl:w-auto' : '',
+        imageAlign && imageAlignmentMap[imageAlign],
+        className,
+      )}
+    >
       {image}
     </div>
   ) : null;
+};

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

@@ -21,6 +21,7 @@ export const Input = JSX<InputProps>(
     onFocus,
     onBlur,
     pattern,
+    autoFocus = false,
   }) => {
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
@@ -61,6 +62,7 @@ export const Input = JSX<InputProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             pattern={pattern}
+            autoFocus={autoFocus}
           />
         </label>
         {children}

package/src/ui-kit/Input/InputProps.ts

@@ -14,4 +14,5 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   onBlur?: () => void;
   valid?: boolean;
   disabled?: boolean;
+  autoFocus?: boolean;
 }

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

@@ -5,12 +5,14 @@ import { ListItem } from './ListItem';
 import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+  XS: 'text-m font-light',
   S: 'text-l font-light',
   M: 'text-h6',
   L: 'text-h5',
 };
 
 const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
+  XS: 'ml-2xs',
   S: 'ml-xs',
   M: 'ml-s',
   L: 'ml-m',

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

@@ -1,8 +1,8 @@
 /**
  * @title Размер пунктов списка
- * @enumNames ["Маленький", "Средний", "Большой"]
+ * @enumNames ["Очень маленький", "Маленький", "Средний", "Большой"]
  */
-export type ListItemSize = 'S' | 'M' | 'L';
+export type ListItemSize = 'XS' | 'S' | 'M' | 'L';
 
 export interface ListContent {
   /** @title Список */

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

@@ -16,6 +16,7 @@ const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 mr-m', // TODO: Действительно нужен этот вариант? отличается только margin
   M: 'w-1.5 h-1.5 mr-s',
   S: 'w-1 h-1 mr-xs',
+  XS: 'w-1 h-1 mr-xs',
 };
 
 export const ListItem = JSX<ListItemProps>(