@redneckz/wildless-cms-uni-blocks 0.6.45 → 0.6.46

package/src/components/Blocks.ts

@@ -15,6 +15,7 @@ import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestm
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -26,6 +27,7 @@ import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { HorizontalLayout } from './HorizontalLayout/HorizontalLayout';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
@@ -43,7 +45,6 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { Recommendation } from './Recommendation/Recommendation';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -72,6 +73,7 @@ export const Blocks: BlocksRegistry = {
   CarouselLinks,
   CarouselProductCard,
   CarouselProgramsCard,
+  CarouselRecommendationCard,
   CarouselTariffsCard,
   Catalog,
   ContactsBlock,
@@ -83,12 +85,14 @@ export const Blocks: BlocksRegistry = {
   GracePeriod,
   Header,
   Headline,
+  HorizontalLayout,
   ImgBlock,
   InsuranceAmountBlock,
   InvestmentInfo,
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  OfficeMap,
   ParagraphBlock,
   PictureText,
   Placeholder,
@@ -99,7 +103,6 @@ export const Blocks: BlocksRegistry = {
   OfficeServicesBlock,
   OtherProducts,
   OtherProductsItem,
-  CarouselRecommendationCard,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
@@ -110,5 +113,4 @@ export const Blocks: BlocksRegistry = {
   VerticalLayout,
   Video,
   Recommendation,
-  OfficeMap,
 };

package/src/components/Bonus/Bonus.tsx

@@ -19,7 +19,6 @@ export const Bonus = JSX<BonusProps>((props) => {
           title={title}
           description={description}
           headlineVersion="M"
-          align="center"
           {...rest}
         />
         <div className="flex flex-wrap w-full mt-9">

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -31,7 +31,6 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         title={title}
         description={subtitle}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {bonusBenefits?.length ? (

package/src/components/CarouselCard/CarouselCard.tsx

@@ -22,13 +22,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
         <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline
-            className="!p-0"
-            title={title}
-            description={description}
-            headlineVersion="M"
-            align="center"
-          />
+          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
           {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
       </div>

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -24,7 +24,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             title={title}
             as="h1"
             description={description}
-            align="left"
+            align="text-left"
             className="p-0"
             bgColorHeadline="secondary"
           />

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -10,7 +10,7 @@ import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}

package/src/components/Catalog/Catalog.tsx

@@ -30,7 +30,6 @@ export const Catalog = JSX<CatalogProps>(
           title={title}
           description={description}
           headlineVersion="M"
-          align="center"
           {...rest}
         />
         <div

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -41,7 +41,7 @@ const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProp
             title={title}
             description={description}
             headlineVersion="XS"
-            align="left"
+            align="text-left"
             bgColorHeadline={version}
           />
           {additionalDescription ? (

package/src/components/Gallery/GalleryCardInner.tsx

@@ -7,7 +7,7 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(

package/src/components/Gallery/GalleryContainer.tsx

@@ -19,7 +19,7 @@ export interface GalleryCardData {
 export const GalleryContainer = JSX<GalleryContainerProps>(
   ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
     <div>
-      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
+      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} />
       <div
         className={`flex mt-8 ${
           cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''

package/src/components/GracePeriod/GracePeriod.tsx

@@ -19,7 +19,6 @@ export const GracePeriod = JSX<GracePeriodProps>(
         title={title}
         description={description}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {calendar ? renderCalendar(calendar) : null}

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

@@ -7,7 +7,7 @@ import type { HeadlineContent } from './HeadlineContent';
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
-  align: 'center',
+  align: 'text-center',
   bgColorHeadline: 'transparent',
 };
 
@@ -40,33 +40,33 @@ const secondaryProps: HeadlineContent = {
 export default {
   'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...defaultProps} align="left" />
+      <Headline className="col-span-12" {...defaultProps} align="text-left" />
     </div>
   ),
   'default center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...defaultProps} align="center" />
+      <Headline className="col-span-12" {...defaultProps} align="text-center" />
     </div>
   ),
   'default right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...defaultProps} align="right" />
+      <Headline className="col-span-12" {...defaultProps} align="text-right" />
     </div>
   ),
 
   'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...primaryProps} align="left" />
+      <Headline className="col-span-12" {...primaryProps} align="text-left" />
     </div>
   ),
   'primary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...primaryProps} align="center" />
+      <Headline className="col-span-12" {...primaryProps} align="text-center" />
     </div>
   ),
   'primary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...primaryProps} align="right" />
+      <Headline className="col-span-12" {...primaryProps} align="text-right" />
     </div>
   ),
   'primary without description': (
@@ -92,17 +92,17 @@ export default {
 
   'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...secondaryProps} align="left" />
+      <Headline className="col-span-12" {...secondaryProps} align="text-left" />
     </div>
   ),
   'secondary center alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...secondaryProps} align="center" />
+      <Headline className="col-span-12" {...secondaryProps} align="text-center" />
     </div>
   ),
   'secondary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...secondaryProps} align="right" />
+      <Headline className="col-span-12" {...secondaryProps} align="text-right" />
     </div>
   ),
   'secondary without description': (

package/src/components/Headline/Headline.fixture.tsx

@@ -6,7 +6,7 @@ import type { HeadlineContent } from './HeadlineContent';
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
-  align: 'center',
+  align: 'text-center',
 };
 
 export const HEADLINE_PRIMARY: HeadlineContent = {
@@ -27,12 +27,12 @@ export default {
   ),
   'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE} align="left" />
+      <Headline className="col-span-12" {...HEADLINE} align="text-left" />
     </div>
   ),
   'default right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE} align="right" />
+      <Headline className="col-span-12" {...HEADLINE} align="text-right" />
     </div>
   ),
   'default difficult XXL': (
@@ -62,7 +62,7 @@ export default {
   ),
   'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="left" />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-left" />
     </div>
   ),
   'primary center alignment': (
@@ -72,12 +72,12 @@ export default {
   ),
   'primary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="right" />
+      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-right" />
     </div>
   ),
   'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="left" />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-left" />
     </div>
   ),
   'secondary center alignment': (
@@ -87,7 +87,7 @@ export default {
   ),
   'secondary right alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="right" />
+      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-right" />
     </div>
   ),
 };

package/src/components/Headline/Headline.mobile.tsx

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
-
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { HEADLINE_BLOCK_STYLE_MAPS } from './constants';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineStyles } from './headlineStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
-    bgColorHeadline = 'transparent',
     className = '',
     title,
     description,
     image,
-    align = 'left',
+    bgColorHeadline = 'transparent',
+    align = 'text-left',
   }) => {
-    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+    const style = headlineStyles[bgColorHeadline];
 
     return (
-      <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
+      <section className={`px-4 py-6 flex flex-col gap-2.5 ${style.wrapper} ${className}`}>
         {title ? (
-          <Heading
-            headingType="h2"
-            className={`${STYLE_MAPS.text} ${AlignText[align]}`}
-            title={title}
-          />
+          <Heading headingType="h2" className={`${style.titleColor} ${align}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m ${STYLE_MAPS.description} ${AlignText[align]}`}>{description}</p>
+          <Paragraph color={style.descriptionColor || style.titleColor} size="text-m" align={align}>
+            {description}
+          </Paragraph>
         ) : null}
         {image?.src && (
           <div className="mt-2.5 mx-auto flex justify-center">

package/src/components/Headline/Headline.tsx

@@ -1,44 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { HEADLINE_BLOCK_STYLE_MAPS, HEADLINE_VERSION } from './constants';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineStyles } from './headlineStyles';
+import { headlineVersionStyles } from './headlineVersionStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
     className = '',
-    bgColorHeadline = 'transparent',
-    align = 'center',
     title,
     description,
     headlineVersion = 'XL',
+    bgColorHeadline = 'transparent',
+    align = 'text-center',
     as,
     ...rest
   }) => {
-    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-    const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
+    const style = headlineStyles[bgColorHeadline];
+    const specificStyle = headlineVersionStyles[headlineVersion];
 
     return (
       <BlockWrapper
-        className={`font-sans flex flex-col p-12 ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`}
+        className={`flex flex-col p-12 ${specificStyle.wrapper} ${style.wrapper} ${className}`}
         {...rest}
       >
         {title ? (
           <Heading
-            headingType={SIZE_MAPS?.headingType}
-            as={as || SIZE_MAPS?.as}
-            className={`whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`}
+            className={`whitespace-pre-wrap ${style.titleColor} ${align}`}
+            {...specificStyle?.title}
+            as={as || specificStyle?.title.as}
             title={title}
           />
         ) : null}
         {description ? (
-          <p className={`${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`}>
+          <Paragraph
+            color={style.descriptionColor || style.titleColor}
+            size={specificStyle.descriptionSize as TextSize}
+            align={align}
+          >
             {description}
-          </p>
+          </Paragraph>
         ) : null}
       </BlockWrapper>
     );

package/src/components/Headline/HeadlineContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Заголовок
@@ -10,7 +10,7 @@ import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 export type HeadlineContent = HeadlineProps & {
   /** @title Изображение (моб.) */
   image?: Picture;
-  align?: AlignType;
+  align?: TextAlign;
   bgColorHeadline?: BlockVersionWithTransparent;
   /** @hidden */
   as?: HeadingTagType;

package/src/components/Headline/headlineStyles.ts

@@ -0,0 +1,25 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+
+export const headlineStyles: Record<
+  BlockVersionWithTransparent,
+  {
+    wrapper: string;
+    titleColor: TextColor;
+    descriptionColor?: TextColor;
+  }
+> = {
+  transparent: {
+    wrapper: 'bg-transparent',
+    titleColor: 'text-primary-text',
+  },
+  primary: {
+    wrapper: 'bg-white',
+    titleColor: 'text-primary-text',
+  },
+  secondary: {
+    wrapper: 'bg-primary-main',
+    titleColor: 'text-white',
+    descriptionColor: 'text-white/80',
+  },
+};

package/src/components/Headline/headlineVersionStyles.ts

@@ -0,0 +1,55 @@
+import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+
+export const headlineVersionStyles: Record<
+  HeadlineVersion,
+  {
+    wrapper: string;
+    title: HeadingCommonProps;
+    descriptionSize: TextSize | TitleSize;
+  }
+> = {
+  XXL: {
+    wrapper: 'gap-[18px]',
+    title: { headingType: 'h0', as: 'h1' },
+    descriptionSize: 'text-h5',
+  },
+  XL: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h1', as: 'h1' },
+    descriptionSize: 'text-xl-light',
+  },
+  L: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h2', as: 'h2' },
+    descriptionSize: 'text-xl-light',
+  },
+  M: {
+    wrapper: 'gap-3',
+    title: { headingType: 'h3', as: 'h3' },
+    descriptionSize: 'text-xl-light',
+  },
+  S: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h4', as: 'h4' },
+    descriptionSize: 'text-xl-light',
+  },
+  XS: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h5', as: 'h5' },
+    descriptionSize: 'text-l-light',
+  },
+};
+
+// TODO Move to Gallery and rename
+export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
+  H6: 'text-h6',
+  XL_L: 'text-xl-light',
+  XL_R: 'text-xl',
+  L_L: 'text-l-light',
+  L_R: 'text-l',
+  M: 'text-m-light',
+  S: 'text-s-light',
+  XS: 'text-xs-light',
+};

package/src/components/HorizontalLayout/HorizontalLayout.example.json

@@ -0,0 +1,19 @@
+{
+  "content": {
+    "version": "primary",
+    "gap": "XS"
+  },
+  "style": ["col-span-12"],
+  "type": "HorizontalLayout",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/src/components/HorizontalLayout/HorizontalLayout.fixture.tsx

@@ -0,0 +1,85 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
+import { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { HorizontalLayout } from './HorizontalLayout';
+
+export const linkDocsExample: LinkDocsContent = {
+  description: 'Ответы на часто задаваемые вопросы',
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
+  ],
+};
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+          ],
+        }}
+        options={options}
+        version="primary"
+      />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+          ],
+        }}
+        options={options}
+        version="secondary"
+        gap="XS"
+      />
+    </div>
+  ),
+  'one item': (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [{ type: 'ProductTile', content: PRODUCT_TILE }],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'three item': (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-4'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-4'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-4'] },
+          ],
+        }}
+        options={options}
+        version="transparent"
+        gap="M"
+      />
+    </div>
+  ),
+};

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
+
+export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
+
+export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
+  ({
+    className = '',
+    gap = 'XS',
+    isPadding = false,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+
+    return (
+      <BlockWrapper
+        className={[
+          'grid grid-cols-12',
+          paddingStyle,
+          GapStyleMap[gap],
+          LayoutBackgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: options })}
+      </BlockWrapper>
+    );
+  },
+);
+
+HorizontalLayout.childrenTypes = {
+  exclude: ['HorizontalLayout'],
+};

package/src/components/HorizontalLayout/HorizontalLayout.ui.json

@@ -0,0 +1 @@
+{}