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

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

@@ -1,12 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListItemSize, ListItemVersion, ListProps } from './ListProps';
-
-const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-  gray: 'text-secondary-text',
-};
+import type { ListItemSize, ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   S: 'text-l-light',
@@ -20,39 +14,25 @@ const ITEM_INDENT_MAP = {
   L: 'ml-4',
 };
 
-export const List = JSX<ListProps>((props) => {
-  const {
-    className = '',
-    hasIndent,
-    isDotted,
-    itemClassName = '',
-    items,
-    listItemSize = 'M',
-    version = 'primary',
-  } = props;
-
-  if (!items?.length) {
-    return null;
-  }
-
-  return (
-    <section
-      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${
-        hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''
-      }`}
-      role="list"
-    >
-      {items.map((item, i) => (
-        <ListItem
-          key={String(i)}
-          className={`${itemClassName} mb-1.5`}
-          isDotted={isDotted}
-          version={version}
-          size={listItemSize}
-        >
-          {item}
-        </ListItem>
-      ))}
-    </section>
-  );
-});
+export const List = JSX<ListProps>(
+  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+    items?.length ? (
+      <section
+        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
+          TEXT_SIZE_MAP[listItemSize]
+        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        role="list"
+      >
+        {items.map((item, i) => (
+          <ListItem
+            key={String(i)}
+            className={`${itemClassName} mb-1.5`}
+            isDotted={isDotted}
+            size={listItemSize}
+          >
+            {item}
+          </ListItem>
+        ))}
+      </section>
+    ) : null,
+);

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

@@ -1,23 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ListItemSize, ListItemVersion } from './ListProps';
+import type { ListItemSize } from './ListProps';
 
 /**
  * @title Параметры элемента списка
  */
 export interface ListItemProps {
   className?: string;
-  version?: ListItemVersion;
   text?: string;
   isDotted?: boolean;
   size?: ListItemSize;
 }
 
-const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'bg-primary-text',
-  secondary: 'bg-white',
-  gray: 'bg-secondary-text',
-};
-
 const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
   M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
@@ -25,18 +18,16 @@ const DOT_SIZE_MAP = {
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-    return (
-      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
-        {isDotted ? (
-          <div>
-            <div
-              className={`rounded-full align-middle inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}`}
-            />
-          </div>
-        ) : null}
-        <span>{children}</span>
-      </div>
-    );
-  },
+  ({ className = '', isDotted = true, children, size = 'M' }) => (
+    <div className={`font-sans flex items-baseline ${className}`} role="listitem">
+      {isDotted ? (
+        <div>
+          <div
+            className={`rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}`}
+          />
+        </div>
+      ) : null}
+      <span>{children}</span>
+    </div>
+  ),
 );

package/mobile/src/ui-kit/List/ListProps.ts

@@ -6,12 +6,6 @@ import type { ListContent } from './ListContent';
  */
 export type ListItemSize = 'S' | 'M' | 'L';
 
-/**
- * @title Версия списка
- * @enumNames ["Основной", "Второстепенный", "Серый"]
- */
-export type ListItemVersion = 'primary' | 'secondary' | 'gray';
-
 /**
  * @title Содержимое списка
  */
@@ -25,5 +19,4 @@ export interface ListProps extends ListContent {
   /** @title Буллиты */
   isDotted?: boolean;
   listItemSize?: ListItemSize;
-  version?: ListItemVersion;
 }

package/mobile/src/ui-kit/Location/Location.tsx

@@ -140,7 +140,7 @@ const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
   foreignOffices?.length ? (
     <div className="border-t border-main-divider mt-7 pt-7">
       <div className="mb-4">
-        <Text size="text-m-light" color="text-secondary-text">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
           Представительства за рубежом:
         </Text>
       </div>

package/mobile/src/ui-kit/Paragraph/Paragraph.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
 
-export const Paragraph = JSX<ParagraphProps>(({ size, color, align, font, children }) => (
-  <p className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>{children}</p>
+export const Paragraph = JSX<ParagraphProps>(({ children, ...style }) => (
+  <p className={['font-sans', ...Object.values(style)].join(' ')}>{children}</p>
 ));

package/mobile/src/ui-kit/Text/Text.tsx

@@ -8,8 +8,6 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>(({ size, color, align, font, children }) => (
-  <span className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>
-    {children}
-  </span>
+export const Text = JSX<TextProps>(({ children, ...style }) => (
+  <span className={['font-sans', ...Object.values(style)].join(' ')}>{children}</span>
 ));

package/mobile/src/ui-kit/Text/TextProps.ts

@@ -1,3 +1,5 @@
+import { BlockVersionMolecule } from '../../model/BlockVersion';
+
 /**
  * @title Размер текста
  */
@@ -35,7 +37,7 @@ export type TitleSize =
 /**
  * @title Цвет текста
  */
-export type TextColor =
+export type TextColor = BlockVersionMolecule<
   | ''
   | 'text-main'
   | 'text-primary-text'
@@ -45,7 +47,8 @@ export type TextColor =
   | 'text-error'
   | 'text-white'
   | 'text-white/80'
-  | 'text-green';
+  | 'text-green'
+>;
 
 /**
  * @title Выравнивание

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 export interface TopItemContent extends LinkProps {
   active?: boolean;
@@ -11,50 +11,44 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  bgColor?: BgColorVersion;
   dataItemName?: string;
   onClick?: () => void;
 }
 
-const TEXT_CLASSES = 'font-sans text-s-light';
-const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
-
 export const TopItem = JSX<TopItemProps>(
-  ({ className = '', active, flat, ariaLabel, bgColor = 'bg-white', children, ...rest }) => {
+  ({ className = '', active, flat, ariaLabel, children, ...rest }) => {
     const link = useLink();
     const { href, target, text, onClick } = link(rest);
 
     return (
       <a
-        className={`${getLinkClasses(bgColor, active, flat)} ${className}`}
+        className={`${getLinkStyle(active, flat)} ${className}`}
         href={href}
         target={target}
         onClick={onClick}
         rel="noopener noreferrer"
         aria-label={ariaLabel}
       >
-        <span className={getTextClasses(bgColor, active, flat)}>{text || children}</span>
+        <span className={getTextStyle(active, flat)}>{text || children}</span>
       </a>
     );
   },
 );
 
-const getLinkClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
-  let classes = 'border-transparent';
-  if (active) {
-    classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
-  }
-
-  return `${classes} ${LINK_CLASSES} ${flat ? '' : 'px-4 py-2'}`;
-};
-
-const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
-  if (bgColor === 'transparent') {
-    return `text-white hover:text-primary-hover ${TEXT_CLASSES}`;
-  }
-  const nonActiveAtoms = `${
-    flat ? 'text-primary-text' : 'text-secondary-text'
-  } hover:text-primary-main`;
-
-  return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES}`;
-};
+const getLinkStyle = (active = false, flat = false) =>
+  style(
+    'inline-block border border-solid bg-transparent text-center no-underline',
+    active
+      ? 'rounded-md border-primary-main group-data-transparent:border-white'
+      : 'border-transparent',
+    flat ? '' : 'px-4 py-2',
+  );
+
+const getTextStyle = (active = false, flat = false) =>
+  style(
+    'font-sans text-s-light',
+    active
+      ? 'text-primary-main'
+      : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'),
+    'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
+  );

package/mobile/src/utils/getColSpan.ts

@@ -1,6 +1,6 @@
-export const getColSpan = (className: string) => {
+export const getColSpan = (className?: string): number => {
   const colSpanPrefix = 'col-span-';
-  const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+  const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
 
   return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
 };

package/mobile/src/utils/style.ts

@@ -1,2 +1,7 @@
-export const style = (...atoms: (string | null | undefined)[]): string =>
-  atoms.filter(Boolean).join(' ');
+type Atom = string | null | undefined;
+
+export const style = (...atoms: Array<Atom | Atom[]>): string =>
+  atoms
+    .flatMap((_) => _)
+    .filter(Boolean)
+    .join(' ');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

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/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/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>
+));