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

package/src/components/ProductTile/renderAdditionalDescription.tsx

@@ -1,18 +1,7 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 
-const DESCRIPTION_STYLE_MAP: Record<BlockVersion, TextColor> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
-export function renderAdditionalDescription(
-  additionalDescription?: string,
-  image?: Picture,
-  version: BlockVersion = 'primary',
-) {
+export function renderAdditionalDescription(additionalDescription?: string, image?: Picture) {
   if (!additionalDescription) {
     return null;
   }
@@ -22,7 +11,7 @@ export function renderAdditionalDescription(
 
   return (
     <div className={`mt-2.5 z-10 ${descriptionWidth}`}>
-      <Paragraph size="text-m" font="font-light" color={DESCRIPTION_STYLE_MAP[version]}>
+      <Paragraph size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
         {additionalDescription}
       </Paragraph>
     </div>

package/src/components/ProductTile/renderBenefit.tsx

@@ -1,17 +1,9 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { Benefit } from './ProductTileContent';
 
-const LABEL_STYLE_MAP: Record<BlockVersion, TextColor> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
 export const renderBenefit =
-  (version: BlockVersion = 'primary') =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
   (benefit: Benefit, i: number) => {
@@ -27,7 +19,12 @@ export const renderBenefit =
           <Text key={`label-${i}`} size="text-h6">
             {benefit.label}
           </Text>,
-          <Text key={`desc-${i}`} size="text-m-light" color={LABEL_STYLE_MAP[version]}>
+          <Text
+            key={`desc-${i}`}
+            size="text-m"
+            font="font-light"
+            color="group-data-primary:text-secondary-text"
+          >
             {benefit.description}
           </Text>,
         ];

package/src/components/PromoTile/PromoTile.tsx

@@ -1,8 +1,8 @@
 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 { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -18,33 +18,32 @@ export const PromoTile = JSX<PromoTileProps>(
     title = 'Акции и спецпредложения',
     date,
     description,
+    as,
     buttons = [],
-    version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
-        VersionStyleMap[version]
-      } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+      className={style(
+        'p-9 box-border',
+        className,
+        getTileRightPadding(className),
+        getTileMinHeight(className),
+      )}
       {...rest}
     >
       <BaseTile
         title={
           title ? (
             <Headline
+              className="!p-0 max-w-[600px]"
               title={title}
-              className={`!p-0 max-w-[600px]`}
               headlineVersion={getTileHeadingType(className)}
-              bgColorHeadline={version}
               align="text-left"
-              as="h2"
-              {...rest}
+              as={as || 'h2'}
             />
           ) : null
         }
-        buttons={
-          buttons?.length ? <ButtonSection buttons={buttons} className="flex gap-3" /> : null
-        }
+        buttons={renderButtonsSection(buttons)}
       >
         <div className="mt-1.5">
           {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}

package/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/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/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/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/src/components/StepsBlock/StepsBlock.mobile.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/src/components/StepsBlock/StepsBlock.tsx

@@ -31,13 +31,12 @@ export const StepsBlock = JSX<StepsBlockProps>(
     return (
       <BlockWrapper
         className={[
-          'box-border py-12 font-sans',
+          'box-border py-12',
           shortGaps ? 'px-20' : 'px-[70px]',
           'flex flex-col items-center overflow-hidden',
-          styleMap.background,
-          styleMap.title,
           className,
         ].join(' ')}
+        version={version}
         {...rest}
       >
         {title ? (
@@ -69,8 +68,7 @@ const renderStepIcon =
     (
       <div key={String(i)} className="flex flex-col items-center text-center">
         <div
-          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
-            ${styleMap.iconBackground} ${styleMap.title}`}
+          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`}
         >
           {checkIsIconRenderable(icon) ? (
             <Img image={getIconWithVersion(icon || {}, version)} width="48" height="48" asSVG />

package/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/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/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -11,7 +11,7 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <SwipeListControlBlock
-        className="col-span-12 h-96"
+        className="col-span-12"
         block={{
           type: 'SwipeListControlBlock',
           blocks: [

package/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/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/src/components/TariffsTable/EmbeddableCellData.mobile.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/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,9 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 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 { TableInnerButton, TableInnerButtonProps } from '../../ui-kit/InnerTable/InnerTableButton';
+import {
+  TableInnerButton,
+  type TableInnerButtonProps,
+} from '../../ui-kit/InnerTable/InnerTableButton';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
@@ -22,16 +25,9 @@ interface TableCellDataProps extends TableInnerButtonProps {
 }
 
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
-  buttons && buttons?.length ? (
-    <div>
-      {buttons.map(({ rounded, ...buttonProps }, idx) =>
-        renderButton({
-          button: { rounded, ...buttonProps },
-          buttonClassName: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`,
-        }),
-      )}
-    </div>
-  ) : null;
+  renderButtonsSection(buttons, {
+    buttonClassName: 'w-12 h-12',
+  });
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
@@ -49,7 +45,6 @@ const renderImgCellData = ({ image }: ImageContent) => (image?.src ? <Img image=
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
     className="flex flex-col justify-between items-start text-h6"
-    version="primary"
     isDotted={isDotted ?? true}
     {...rest}
   />

package/src/components/TariffsTable/TariffsTable.tsx

@@ -46,9 +46,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={`bg-white font-sans p-12 overflow-hidden text-primary-text relative ${
-          itemCount > 1 ? 'pr-0' : ''
-        } ${className}`}
+        className={`p-12 overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
         {...rest}
       >
         {renderTitle({ title, description })}

package/src/components/TextBlock/TextBlock.mobile.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>