@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.2

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

@@ -1,7 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { VersionStyleMap } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -24,7 +22,8 @@ export const Recommendation = JSX<RecommendationProps>(
 
     return (
       <BlockWrapper
-        className={`relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`}
+        className={`relative font-sans p-9 overflow-hidden text-center ${className}`}
+        version={version}
         {...rest}
       >
         {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
@@ -39,7 +38,7 @@ export const Recommendation = JSX<RecommendationProps>(
                   <RecommendationCard
                     key={String(i)}
                     version={version}
-                    className={BorderVersionStyleMap[version]}
+                    className="border-gray group-data-secondary:border-white/50"
                     {...card}
                   />
                 ))

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import type { UniBlockProps } from '../../model/JSXBlock';
+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 { List } from '../../ui-kit/List/List';
@@ -8,13 +9,10 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
 import type { RecommendationCardTypes } from './RecommendationContent';
 
-export interface RecommendationCardProps extends RecommendationCardTypes {
-  className?: string;
-  version?: BlockVersion;
-}
+export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
-  ({ className = '', title, description, items, image, version, socialMedia, button }) => {
+  ({ className = '', title, description, items, image, socialMedia, button, ...rest }) => {
     const tileTitle = title ? (
       <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
@@ -23,9 +21,10 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
     ) : null;
 
     return (
-      <section
+      <BlockWrapper
         className={`relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`}
         role="listitem"
+        {...rest}
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
@@ -34,18 +33,17 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
                 items={items}
-                version={version}
               />
             ) : null}
-            {socialMedia ? (
-              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
-            ) : null}
+            {socialMedia ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
             {button?.text ? (
-              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16 px-5' })}</div>
+              <div className="pt-2">
+                {renderButtonsSection([button], { buttonClassName: 'mt-16 px-5' })}
+              </div>
             ) : null}
           </div>
         </BaseTile>
-      </section>
+      </BlockWrapper>
     );
   },
 );

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

@@ -1,29 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { RollupItemProps } from './RollupItemProps';
 
-interface RollupFoldablePartProps extends FoldablePartProps {
-  label?: string;
-  version?: BlockVersion;
-}
-
-interface FoldButtonProps {
-  label?: string;
-  icon?: IconName;
-  isUnfolded?: boolean;
-  onClick?: () => void;
-  onToggle?: () => void;
-}
-
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
@@ -33,7 +21,11 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     version = 'primary',
     ...rest
   }) => (
-    <div className={`border-b border-solid border-main-divider w-full ${className}`}>
+    <BlockWrapper
+      className={`border-b border-solid border-main-divider w-full ${className}`}
+      tag="div"
+      {...rest}
+    >
       <Foldable
         isFoldButtonOnTop={isFoldButtonOnTop}
         unfoldedByDefault={isExpanded}
@@ -48,50 +40,53 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
           </div>
         )}
         renderFoldButton={({ isUnfolded, onToggle }) =>
-          renderFoldButton({ isUnfolded, onToggle, label, version })
+          renderFoldButton({ version, label, isUnfolded, onToggle })
         }
       />
-    </div>
+    </BlockWrapper>
   ),
 );
 
 RollupItem.childrenTypes = {
-  exclude: [
-    'RollupItem',
-    'Accordion',
-    'AccordionItem',
-    'OtherProducts',
-    'OtherProductsItem',
-    'VerticalLayout',
-  ],
+  exclude: ['RollupItem', 'Accordion', 'AccordionItem', 'OtherProducts', 'OtherProductsItem'],
 };
 
-const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
-  const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];
-  const iconsSecondary: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-  const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
+interface FoldButtonProps extends FoldablePartProps {
+  version?: BlockVersion;
+  label?: string;
+}
+
+const renderFoldButton = ({
+  version,
+  label: defaultLabel,
+  isUnfolded,
+  onToggle,
+}: FoldButtonProps) => {
+  const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
 
   return version === 'primary' ? (
-    <FoldButton
-      icon={iconsPrimary[Number(isUnfolded)]}
-      label={labels[Number(isUnfolded)]}
-      onClick={onToggle}
-    />
+    renderPrimaryFoldButton({ label, icon: isUnfolded ? 'MinusIcon' : 'PlusIcon', onToggle })
   ) : (
     <DefaultFoldButton
-      icon={iconsSecondary[Number(isUnfolded)]}
-      label={labels[Number(isUnfolded)]}
+      label={label}
+      icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
       onClick={onToggle}
     />
   );
 };
 
-const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
+interface PrimaryFoldButtonProps {
+  label?: string;
+  icon?: IconName;
+  onToggle?: () => void;
+}
+
+const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonProps) => (
   <button
-    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
-    onClick={onClick}
+    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer"
+    onClick={onToggle}
   >
     <span className="text-xl font-medium pr-2.5">{label}</span>
     {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
   </button>
-));
+);

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -42,7 +42,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     return (
       <BlockWrapper className={className} {...rest}>
-        <div className="font-sans bg-white px-8 py-12">
+        <div className="px-8 py-12">
           {title ? (
             <Heading
               title={title}

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
@@ -23,24 +24,24 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
 
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
-    className,
+    className = '',
     title,
     description,
     showLines = true,
     steps,
     size = 'normal',
     version = 'primary',
+    ...rest
   }) => {
     const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
-      <section
-        className={`box-border font-sans bg-white px-4 py-6 flex flex-col
-        ${styleMap.background} ${styleMap.title} ${className || ''}`}
+      <BlockWrapper
+        className={`box-border px-4 py-6 flex flex-col ${className}`}
+        version={version}
+        {...rest}
       >
-        {title ? (
-          <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
-        ) : null}
+        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
         {description ? (
           <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
@@ -53,7 +54,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
             </div>
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );
@@ -104,7 +105,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
     <div
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
+      <span className={`font-medium flex self-center ${iconTextSize}`}>
         {checkIsIconRenderable(step?.icon) ? (
           <Img
             image={getIconWithVersion({ ...step.icon }, version)}

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,8 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 
 export type StyleType = {
-  background: string;
-  title: string;
   description: string;
   iconText: string;
   iconBackground: string;
@@ -12,8 +10,6 @@ export type StyleType = {
 
 export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
-    background: 'bg-white',
-    title: 'text-primary-text',
     description: '!text-secondary-text text-l-light',
     iconText: 'text-secondary-text',
     iconBackground: 'bg-main-divider',
@@ -21,8 +17,29 @@ export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     dot: 'bg-secondary-text',
   },
   secondary: {
-    background: 'bg-primary-main',
-    title: 'text-white',
+    description: '!text-white/80 text-l-light',
+    iconText: 'text-white',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+    dot: 'bg-white/80',
+  },
+  gray: {
+    // TODO Replace this Map with group-data-*
+    description: '!text-white/80 text-l-light',
+    iconText: 'text-white',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+    dot: 'bg-white/80',
+  },
+  transparent: {
+    description: '!text-white/80 text-l-light',
+    iconText: 'text-white',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+    dot: 'bg-white/80',
+  },
+  '': {
+    // TODO Replace this Map with group-data-*
     description: '!text-white/80 text-l-light',
     iconText: 'text-white',
     iconBackground: 'bg-white/30',

package/mobile/src/components/StepsBlock/renderStepContent.tsx

@@ -1,7 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { VNode } from '../../model/VNode';
 import { Button } from '../../ui-kit/Button/Button';
-import { renderItems } from './renderItems';
+import { List } from '../../ui-kit/List/List';
 import type { Step } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
 
@@ -34,18 +35,18 @@ export const renderStepContent =
               description,
               className: styleMap.description,
             })}
-            {renderItems({
-              items,
-              isDotted,
-              version,
-              className: getItemsClasses({ className: 'text-left', description, styleMap }),
-            })}
+            <List
+              className={getItemsClasses({ className: 'text-left', description, styleMap })}
+              items={items}
+              listItemSize="M"
+              isDotted={isDotted}
+            />
           </div>
         </div>
         {button?.text && !isMainButton ? (
           <Button
             className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
-            version={version}
+            version={version as ButtonVersion}
             {...button}
           >
             {button?.text}

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -12,7 +12,8 @@ import type { GroupTabData } from './TabsContent';
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
 const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+const INACTIVE_BADGE_CLASSES =
+  'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
   ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -1,7 +1,7 @@
 export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
-export const INACTIVE_LINK_CLASSES = 'group bg-white';
+export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
 
 export const TEXT_CLASSES = 'font-sans text-m';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,5 +1,5 @@
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { List } from '../../ui-kit/List/List';
@@ -13,17 +13,11 @@ export type EmbeddableCellDataType =
   | ListProps;
 
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
-  buttons && buttons?.length ? (
-    <div>
-      {buttons.map(({ rounded, icon, ...buttonProps }, idx) =>
-        renderButton({
-          button: { rounded, icon, ...buttonProps },
-          buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
-          index: idx,
-        }),
-      )}
-    </div>
-  ) : null;
+  renderButtonsSection(buttons, {
+    className: 'mt-3',
+    buttonClassName: 'w-12 h-12',
+  });
+
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
 
@@ -41,7 +35,6 @@ const renderImgCellData = ({ image }: ImageContent) =>
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
     className="flex flex-col justify-between items-start text-m"
-    version="gray"
     isDotted={isDotted ?? true}
     {...rest}
   />

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -40,7 +40,6 @@ export const TextBlock = JSX<TextBlockProps>(
     isDotted = true,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-    const listBlockVersion = blockVersion === 'secondary' ? 'secondary' : 'gray';
 
     return (
       <section
@@ -56,12 +55,7 @@ export const TextBlock = JSX<TextBlockProps>(
             <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
           {items?.length ? (
-            <List
-              className="mt-1 text-m"
-              items={items}
-              isDotted={isDotted}
-              version={listBlockVersion}
-            />
+            <List className="mt-1 text-m" items={items} isDotted={isDotted} />
           ) : null}
         </div>
       </section>

package/mobile/src/components/Tile/Tile.tsx

@@ -1,12 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { ListProps } from '../../ui-kit/List/ListProps';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -14,12 +12,10 @@ import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
 
-export interface TileProps extends TileContent, UniBlockProps {
-  role?: string;
-}
+export interface TileProps extends TileContent, UniBlockProps {}
 
-export const Tile = JSX<TileProps>((props) => {
-  const {
+export const Tile = JSX<TileProps>(
+  ({
     title,
     headingType = 'h3',
     description,
@@ -29,18 +25,14 @@ export const Tile = JSX<TileProps>((props) => {
     isDotted = true,
     listItemSize = 'M',
     className = '',
-    version = 'primary',
     tags,
     children,
     ...rest
-  } = props;
-  const headingClassName = version === 'primary' ? 'text-primary-text' : '';
-
-  return (
+  }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
-        VersionStyleMap[version]
-      } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+      className={`overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(
+        className,
+      )} ${getTileMinHeight(className)} ${className}`}
       {...rest}
     >
       <BaseTile
@@ -50,19 +42,14 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h2"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] ${headingClassName}`}
-            />
-          ) : null
-        }
-        buttons={
-          buttons?.length ? (
-            <ButtonSection
-              buttons={buttons.map((button) => ({ ...button, className: 'min-w-[158px]' }))}
-              className="flex mt-8 gap-3"
-              {...rest}
+              className={`whitespace-pre-wrap max-w-[600px]`}
             />
           ) : null
         }
+        buttons={renderButtonsSection(buttons, {
+          className: 'mt-8',
+          buttonClassName: 'min-w-[158px]',
+        })}
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
@@ -71,22 +58,15 @@ export const Tile = JSX<TileProps>((props) => {
           </div>
         ) : null}
         {children}
-        {renderList({ version, isDotted, listItemSize }, items)}
+        <List
+          className="mt-2.5"
+          itemClassName="mb-1.5"
+          items={items}
+          isDotted={isDotted}
+          listItemSize={listItemSize}
+        />
         {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
       </BaseTile>
     </BlockWrapper>
-  );
-});
-
-function renderList({ version, isDotted, listItemSize }: ListProps, items?: string[]) {
-  return items?.length ? (
-    <List
-      items={items}
-      isDotted={isDotted}
-      className="mt-2.5"
-      listItemSize={listItemSize}
-      itemClassName="mb-1.5"
-      version={version}
-    />
-  ) : null;
-}
+  ),
+);

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignType } from '../../model/AlignType';
-import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { gapStyles } from '../HorizontalLayout/gapStyles';
 import type { VerticalLayoutContent } from './VerticalLayoutContent';
 
 export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
@@ -25,21 +26,18 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     options,
     ...rest
   }) => {
-    const paddingStyle = isPadding ? 'p-12' : '';
     const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
 
     return (
       <BlockWrapper
-        className={[
+        className={style(
           'flex flex-col [&>*]:max-w-full',
-          paddingStyle,
-          GapStyleMap[gap],
+          isPadding ? 'p-12' : '',
+          gapStyles[gap],
           align && alignStyle[align],
-          LayoutBackgroundStyleMap[version],
           className,
-        ]
-          .filter(Boolean)
-          .join(' ')}
+        )}
+        version={version}
         {...rest}
       >
         {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
@@ -48,6 +46,4 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
   },
 );
 
-VerticalLayout.childrenTypes = {
-  exclude: ['VerticalLayout'],
-};
+VerticalLayout.childrenTypes = [];

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,19 +1,14 @@
 import type { AlignType } from '../../model/AlignType';
-import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ColorPalette } from '../../model/ContentPageDef';
-
-/**
- * @title Отсуп между компонентами
- * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
- */
-export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
+import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 
 /**
  * @title Вертикальный компоновщик
  */
 export interface VerticalLayoutContent {
   colorPalette?: ColorPalette;
-  version?: BlockVersionWithTransparent;
+  version?: BlockVersion;
   align?: AlignType;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */