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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.50",
+  "version": "0.7.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -188,7 +188,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "45 kB",
+      "limit": "47 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/BlockRenderer/renderBlock.tsx

@@ -1,11 +1,12 @@
 import type { BlockAncestors } from '../model/BlockDecorator';
 import type { BlockDef } from '../model/ContentPageDef';
-import { style2className } from '../utils/style2className';
+import { style } from '../utils/style';
 import type { BlockRendererOptions } from './BlockRendererOptions';
 import { defaultBlockDecorator } from './defaultBlockDecorator';
 
 const DEFAULT_ANCESTORS: BlockAncestors = [];
-const DEFAULT_STYLE = ['col-span-12'];
+
+const defaultStyle = 'col-span-12';
 
 export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
   const {
@@ -25,7 +26,11 @@ export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
 
   return blockDecorator(
     {
-      blockClassName: `scroll-mt-12 ${className} ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      blockClassName: style(
+        'scroll-mt-12', // TODO scroll-mt-12 ? here?
+        className,
+        block.style || defaultStyle,
+      ),
       block,
       ancestors,
       // Adjusted by decorator block and blockClassName

package/src/common.css

@@ -71,9 +71,20 @@ html {
     display: flex;
     overflow-x: scroll;
     -webkit-overflow-scrolling: touch;
+    -webkit-scroll-snap-type: x mandatory;
+    -ms-scroll-snap-type: x mandatory;
     scroll-snap-type: x mandatory;
   }
 
+  .vertical-list {
+    height: 100%;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    -webkit-scroll-snap-type: y mandatory;
+    -ms-scroll-snap-type: y mandatory;
+    scroll-snap-type: y mandatory;
+  }
+
   .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;

package/src/components/Accordion/Accordion.mobile.tsx

@@ -11,7 +11,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
   ({ title, description, className = '', ...rest }) => (
-    <BlockWrapper className={`py-6 px-4 bg-white text-primary-text ${className}`} {...rest}>
+    <BlockWrapper className={`py-6 px-4 ${className}`} {...rest}>
       {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
       {description ? (
         <div className="mb-5">

package/src/components/Accordion/Accordion.tsx

@@ -12,10 +12,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
   ({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (
-    <BlockWrapper
-      className={`p-12 mb-1 last:mb-0 bg-white text-primary-text ${className}`}
-      {...rest}
-    >
+    <BlockWrapper className={`p-12 mb-1 last:mb-0 ${className}`} {...rest}>
       {title ? (
         <Heading
           headingType="h3"

package/src/components/AccordionItem/AccordionItem.tsx

@@ -41,7 +41,7 @@ interface FoldButtonProps {
 
 const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
   <button
-    className="border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
+    className="border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer"
     onClick={onClick}
   >
     <Text size="text-xl" font="font-medium">

package/src/components/BaseTile/BaseTile.tsx

@@ -1,11 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BaseTileCommonProps } from './BaseTileProps';
 
-export interface BaseTileProps extends BaseTileCommonProps {
-  className?: string;
-}
-
-export const BaseTile = JSX<BaseTileProps>(
+export const BaseTile = JSX<BaseTileCommonProps>(
   ({ className = '', title = '', buttons, image, children }) => (
     <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
       {title}

package/src/components/BaseTile/BaseTileProps.ts

@@ -1,9 +1,9 @@
 import type { AlignType } from '../../model/AlignType';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VNode } from '../../model/VNode';
+import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
 
-export interface BaseTileCommonProps {
+export interface BaseTileCommonProps extends UniBlockProps {
   title?: VNode;
   headingType?: HeadingType;
   description?: string;
@@ -11,6 +11,5 @@ export interface BaseTileCommonProps {
   items?: string[];
   list?: string;
   buttons?: VNode;
-  version?: BlockVersion;
   align?: AlignType;
 }

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,81 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion, VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
-import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
-
-const benefitsTextStyleMap = {
-  primary: '',
-  secondary: 'text-white',
-};
-
-const benefitsDescriptionStyleMap = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white opacity-80',
-};
-
-const benefitsIconStyleMap = {
-  primary: 'bg-main-divider text-primary-main',
-  secondary: 'bg-white/30 text-black',
-};
+import type {
+  BenefitBlockItemProps,
+  BenefitsBlockContent,
+  DescriptionDef,
+  ListBenefitDef,
+  TextBenefitDef,
+} from './BenefitsBlockContent';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, version = 'primary', ...rest }) => (
-    <BlockWrapper
-      className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`}
-      {...rest}
-    >
+  ({ className = '', title, benefitList, ...rest }) => (
+    <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
       {title ? (
-        <Heading
-          headingType="h3"
-          as="h2"
-          className={`max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`}
-          title={title}
-        />
+        <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}
       {benefitList?.length ? (
         <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-          {benefitList.map(renderStep(version))}
+          {benefitList.map(renderStep)}
         </div>
       ) : null}
     </BlockWrapper>
   ),
 );
 
-const renderStep = (version: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
   const description = benefit.description;
 
   return (
     <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
       {benefit?.icon?.icon ? (
         <Img
-          className={`w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`}
-          image={getIconWithVersion(benefit.icon, version)}
+          className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
+          image={benefit.icon}
           asSVG
         />
       ) : null}
       {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
       <div className="ml-5">
-        {benefit?.label ? (
-          <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[version]}`}>{benefit.label}</h3>
-        ) : null}
-        {renderDescription(description, version)}
+        {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
+        {renderDescription(description)}
       </div>
     </div>
   );
 };
 
-const renderDescription = (description: DescriptionDef | undefined, version: BlockVersion) => {
+const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`}>
+    <div className="mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/Blocks.ts

@@ -50,6 +50,7 @@ import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -109,6 +110,7 @@ export const Blocks: BlocksRegistry = {
   RollupItem,
   SafeDepositRental,
   StepsBlock,
+  SwipeListControlBlock,
   Tabs,
   TariffsTable,
   TextBlock,

package/src/components/Bonus/Bonus.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 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 { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
@@ -12,38 +12,30 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
       <div className="container">
-        <Headline
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          {...rest}
-        />
+        <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems?.length
-            ? bonusItems.map((_, i) => {
-                return (
-                  <div
-                    key={String(i)}
-                    className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
-                  >
-                    <div className="flex justify-between w-full">
-                      <div className="flex flex-col justify-between mr-4">
-                        <div>
-                          <div className="text-h4">{_.title}</div>
-                          <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
-                        </div>
-                        {_?.buttons?.length ? <ButtonSection buttons={_?.buttons} /> : null}
+            ? bonusItems.map((_, i) => (
+                <div
+                  key={String(i)}
+                  className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
+                >
+                  <div className="flex justify-between w-full">
+                    <div className="flex flex-col justify-between mr-4">
+                      <div>
+                        <div className="text-h4">{_.title}</div>
+                        <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
                       </div>
-                      {_.bonusItemContent?.bonusType
-                        ? renderBonusItemContent(_.bonusItemContent)
-                        : null}
+                      {renderButtonsSection(_?.buttons)}
                     </div>
+                    {_.bonusItemContent?.bonusType
+                      ? renderBonusItemContent(_.bonusItemContent)
+                      : null}
                   </div>
-                );
-              })
+                </div>
+              ))
             : null}
         </div>
       </div>

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -26,13 +26,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
       className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
       {...rest}
     >
-      <Headline
-        className="!p-0 mb-8"
-        title={title}
-        description={subtitle}
-        headlineVersion="M"
-        {...rest}
-      />
+      <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />
       {bonusBenefits?.length ? (
         <div
           className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -9,7 +9,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 
 export const BusinessBlock = JSX<BusinessBlockProps>(
   ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
       <Heading headingType="h3" title={title} className="text-center mb-8" />
       <div className="flex gap-5">
         {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderButton } 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 type { BusinessCardItemProps, BusinessCardProps } from './BusinessBlockContent';
@@ -17,7 +17,7 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
       ) : null}
       {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
       {cardItems?.length ? <ul>{cardItems.map((_, i) => renderItem(_, String(i)))}</ul> : null}
-      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+      {renderButtonsSection([button], { buttonClassName: 'mt-6' })}
     </div>
   );
 });

package/src/components/ButtonBlock/ButtonBlock.tsx

@@ -1,17 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import type { ButtonBlockContent } from './ButtonBlockContent';
 
 interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
 
-export const ButtonBlock = JSX<ButtonBlockProps>((props) => {
-  const { className, button, ...rest } = props;
-
-  return (
-    <BlockWrapper className={className} {...rest}>
-      {button ? renderButton({ button }) : null}
-    </BlockWrapper>
-  );
-});
+export const ButtonBlock = JSX<ButtonBlockProps>(({ button, ...rest }) => (
+  <BlockWrapper {...rest}>{renderButtonsSection([button])}</BlockWrapper>
+));

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { CommonCalculatorProps } from './CalculatorContent';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
 import { Rate } from './Rate';
-import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
@@ -60,7 +60,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
         </div>
         <div className="w-full max-w-[350px]">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
-          {renderButtonSection(buttons)}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/Calculator.tsx

@@ -40,10 +40,7 @@ export const Calculator = JSX<CalculatorProps>(
     });
 
     return (
-      <BlockWrapper
-        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`box-border overflow-hidden relative w-100 ${className}`} {...rest}>
         <div className="bg-white">
           {tabsNav.length > 1
             ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { CommonCalculatorProps } from './CalculatorContent';
+import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
-import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
@@ -96,7 +96,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
             onChange={(text: string) => toggleIsAnnuity(text === ANNUITY)}
           />
-          {renderButtonSection(buttons)}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,12 +2,12 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
-import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
@@ -78,7 +78,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
             onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
           />
-          {renderButtonSection(buttons)}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/CardTransfer/CardTransfer.tsx

@@ -37,10 +37,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper
-        className={`p-12 flex flex-col items-center font-sans bg-white ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput

package/src/components/Carousel/Carousel.example.json

@@ -1,5 +1,6 @@
 {
   "isBlur": false,
   "visibleItemCount": 1,
-  "isCycle": false
+  "isCycle": false,
+  "isPadding": true
 }

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,14 +1,14 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
-import { Carousel } from './Carousel';
-import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Carousel } from './Carousel';
 
 const options = {
   blocksRegistry: Blocks,
@@ -59,12 +59,10 @@ export default {
         isBlur={false}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselCatalogCard',
-              content: CATALOG_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: CATALOG_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselCatalogCard',
+            content: CATALOG_CARD,
+          }),
         }}
         options={options}
       />
@@ -98,12 +96,10 @@ export default {
         isBlur={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselProductCard',
-              content: PRODUCT_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+          }),
         }}
         options={options}
       />
@@ -117,12 +113,10 @@ export default {
         isBlur={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselProductCard',
-              content: PRODUCT_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+          }),
         }}
         options={options}
       />
@@ -136,12 +130,10 @@ export default {
         isBlur={false}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselProgramsCard',
-              content: BUSINESS_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: BUSINESS_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselProgramsCard',
+            content: BUSINESS_CARD,
+          }),
         }}
         options={options}
       />

package/src/components/Carousel/Carousel.tsx

@@ -9,6 +9,7 @@ import {
   useSwipeListScroll,
 } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import type { CarouselContent } from './CarouselContent';
+import { style } from '../../utils/style';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -16,11 +17,19 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 
 const ITEMS_GAP = 4;
 
-const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
 const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
-  ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+  ({
+    className = '',
+    itemCount,
+    visibleItemCount,
+    isBlur = true,
+    isCyclic = false,
+    isPadding = true,
+    ...rest
+  }) => {
     const { blocks: childBlocks } = rest.block || {};
     const count = itemCount || childBlocks?.length || 0;
 
@@ -30,7 +39,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     });
 
     return (
-      <BlockWrapper className={`font-sans p-12 ${className}`} {...rest}>
+      <BlockWrapper className={style(getPaddingStyle(isPadding), className)} {...rest}>
         <div className="relative max-w-full">
           <SwipeListContainer
             containerRef={containerRef}
@@ -80,3 +89,5 @@ const renderScrollButtons = ({
     ) : null}
   </div>
 );
+
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');

package/src/components/Carousel/Carousel.ui.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/src/components/Carousel/CarouselContent.ts

@@ -11,4 +11,6 @@ export interface CarouselContent {
   isBlur?: boolean;
   /** @title Цикличность */
   isCyclic?: boolean;
+  /** @title Внутренний отступ  */
+  isPadding?: boolean;
 }