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

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
+import { blockStyles } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';
@@ -13,32 +13,44 @@ export interface GalleryContainerProps extends GalleryInnerProps {
 
 export interface GalleryCardData {
   card: GalleryCardProps;
-  version: GalleryVersion;
+  galleryVersion: GalleryVersion;
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
+  ({
+    headlineVersion = 'M',
+    cards = [],
+    galleryVersion = 'normal',
+    activeIndex,
+    title,
+    description,
+  }) => (
     <div>
-      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} />
+      <Headline
+        className="!p-0"
+        title={title}
+        description={description}
+        headlineVersion={headlineVersion}
+      />
       <div
         className={`flex mt-8 ${
-          cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          cards?.length <= galleryLengthForScrollMap[galleryVersion] ? 'justify-center' : ''
         } duration-1000`}
-        style={{ transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }}
+        style={{ transform: `translateX(-${activeIndex * cardWidthMap[galleryVersion]}px)` }}
         role="list"
       >
-        {cards?.map((card, i) => renderCard({ card, version }, i))}
+        {cards?.map((card, i) => renderCard({ card, galleryVersion }, i))}
       </div>
     </div>
   ),
 );
 
-function renderCard({ card, version }: GalleryCardData, i: number) {
+function renderCard({ card, galleryVersion }: GalleryCardData, i: number) {
   return (
     <section
       className={`box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[version]} ${
-        VersionStyleMap[card.version ?? 'primary']
+        items-stretch ${cardStyleMap[galleryVersion]} ${
+        blockStyles[card.version ?? 'primary'] // TODO Replace with direct BlockWrapper usage
       } w-full col-span-4`}
       key={String(i)}
       role="listitem"

package/mobile/src/components/Gallery/GalleryInner.tsx

@@ -3,30 +3,35 @@ import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 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 { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
 import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
-  version?: GalleryVersion;
+  galleryVersion?: GalleryVersion;
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ cards = [], className = '', version = 'normal', button, ...rest }) => {
+  ({ cards = [], className = '', galleryVersion = 'normal', button, ...rest }) => {
     const [activeIndex, controls] = useCarouselControls({
       itemCount: cards?.length,
-      visibleItemCount: galleryLengthForScrollMap[version],
+      visibleItemCount: galleryLengthForScrollMap[galleryVersion],
     });
     const { isScrollAvailable } = controls;
 
     return (
       <BlockWrapper
-        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
+        className={`relative p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
-        <GalleryContainer cards={cards} version={version} activeIndex={activeIndex} {...rest} />
+        <GalleryContainer
+          cards={cards}
+          galleryVersion={galleryVersion}
+          activeIndex={activeIndex}
+          {...rest}
+        />
         {renderArrows({
           ...controls,
           btnClass: ['left-8', 'right-8'],
@@ -38,7 +43,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
           </div>
         ) : null}
-        {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
+        {renderButtonsSection([button], { className: 'mt-8 mx-auto' })}
       </BlockWrapper>
     );
   },

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,14 +13,8 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-12 ${className}`} {...rest}>
-      <Headline
-        className="!p-0 mb-4"
-        title={title}
-        description={description}
-        headlineVersion="M"
-        {...rest}
-      />
+    <BlockWrapper className={`p-12 ${className}`} {...rest}>
+      <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>
   ),

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -2,64 +2,58 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
-
 interface DropdownMenuProps {
   className?: string;
   items: LinkProps[];
   activeItem?: LinkProps;
-  bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ className = '', items, activeItem, bgColor }) => {
-    const link = useLink();
+export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, activeItem }) => {
+  const link = useLink();
 
-    const [visible, setVisible] = useState(false);
-    const handleToggle = useCallback(() => setVisible((_) => !_), []);
+  const [visible, setVisible] = useState(false);
+  const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-    const handleClickOutside = useCallback(() => setVisible(false), []);
-    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+  const handleClickOutside = useCallback(() => setVisible(false), []);
+  const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
-    return (
-      <div
-        className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
-        ref={ref}
+  return (
+    <div
+      className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+      ref={ref}
+    >
+      <button
+        className="group/btn flex justify-between items-center h-6 ml-6"
+        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+        onClick={handleToggle}
       >
-        <button
-          className="flex justify-between items-center cursor-pointer h-6 ml-6"
-          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-          onClick={handleToggle}
-        >
-          {Array(3).fill(bgColor).map(renderDot)}
-        </button>
-        <div
-          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
-          aria-hidden={!visible}
-        >
-          {items?.map((item, i) => (
-            <a
-              key={item.href || String(i)}
-              className={`text-l-light pb-4 hover:text-primary-main ${
-                item === activeItem ? 'text-primary-main' : ''
-              }`}
-              {...link(item)}
-            >
-              {item.text}
-            </a>
+        {Array(3)
+          .fill(null)
+          .map((_, i) => (
+            <div
+              key={String(i)}
+              className="w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+            />
           ))}
-        </div>
+      </button>
+      <div
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+        aria-hidden={!visible}
+      >
+        {items?.map((item, i) => (
+          <a
+            key={item.href || String(i)}
+            className={`text-l-light pb-4 hover:text-primary-main ${
+              item === activeItem ? 'text-primary-main' : ''
+            }`}
+            {...link(item)}
+          >
+            {item.text}
+          </a>
+        ))}
       </div>
-    );
-  },
-);
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);
+    </div>
+  );
+});

package/mobile/src/components/Header/Header.tsx

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
@@ -8,6 +10,7 @@ import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
 import { AccordionItem } from '../AccordionItem/AccordionItem';
@@ -18,54 +21,60 @@ import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
-  const router = useRouter();
+const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
+  'bg-white': 'primary',
+  transparent: 'transparent',
+};
 
-  const fallback: Fallback | undefined = rest.options?.page?.fallback;
-  const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
-    projectSettings.SITEMAP || 'sitemap',
-    fallback,
-  );
+export const Header = JSX<HeaderProps>(
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+    const router = useRouter();
 
-  const activeTopItem = topItems?.find(isTopItemActive(router));
-  const subItems = activeTopItem?.items;
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
+    const fallback: Fallback | undefined = rest.options?.page?.fallback;
+    const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
+      projectSettings.SITEMAP || 'sitemap',
+      fallback,
+    );
 
-  return (
-    <header className={`${bgColor} ${className}`}>
-      <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
-        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
-          <div className="flex no-scrollbar horizontal-list h-full items-center">
-            {subItems?.map((_, i) => (
-              <HeaderItem
-                key={String(i)}
-                className="mr-8 whitespace-nowrap text-s"
-                active={_ === activeSubItem}
-                bgColor={bgColor}
-                {..._}
-              />
-            ))}
-          </div>
-        </nav>
-      </div>
-      {burgerMenuShow ? (
-        <HeaderBurger
-          onClick={handleBurgerMenuShow}
-          burgerSubMenu={dispositions}
-          defaultLocation={defaultLocation}
-        >
-          <AccordionItemsList>
-            {topItems?.map((item, i) => (
-              <AccordionItem key={String(i)} label={item.text}>
-                <LinkList documents={item.items} />
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        </HeaderBurger>
-      ) : null}
-    </header>
-  );
-});
+    const activeTopItem = topItems?.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
+    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+    const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
+
+    return (
+      <BlockWrapper tag="header" version={version} {...rest}>
+        <div className="container px-4 py-0 box-border">
+          <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
+          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
+            <div className="flex no-scrollbar horizontal-list h-full items-center">
+              {subItems?.map((_, i) => (
+                <HeaderItem
+                  key={String(i)}
+                  className="mr-8 whitespace-nowrap text-s"
+                  active={_ === activeSubItem}
+                  {..._}
+                />
+              ))}
+            </div>
+          </nav>
+        </div>
+        {burgerMenuShow ? (
+          <HeaderBurger
+            onClick={handleBurgerMenuShow}
+            burgerSubMenu={dispositions}
+            defaultLocation={defaultLocation}
+          >
+            <AccordionItemsList>
+              {topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} label={item.text}>
+                  <LinkList documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
+          </HeaderBurger>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLocation } from '../../hooks/useLocation';
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
 import { Img } from '../../ui-kit/Img/Img';
@@ -10,9 +10,9 @@ import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
+  version?: BlockVersion;
   defaultLocation?: string;
   officesLink?: string;
-  bgColor?: BgColorVersion;
   foreignOffices?: ForeignOffice[];
 }
 
@@ -20,37 +20,20 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
   className?: string;
 }
 
-const COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-text hover:text-primary-main',
-  transparent: 'text-white',
-};
-const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'text-secondary-light hover:text-secondary-hover',
-  transparent: 'text-white',
-};
-const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
-  'bg-white': 'black',
-  transparent: 'white',
-};
-
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({
-    className,
-    officesLink,
-    defaultLocation = 'Москва',
-    foreignOffices,
-    bgColor = 'bg-white',
-  }) => {
+  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
     const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
 
     const [location, onChangeLocation] = useLocation(defaultLocation);
 
-    const showLocationModal = () => {
+    const showLocationModal = useCallback(() => {
       setShowLocationModal(true);
-    };
-    const hideLocationModal = () => {
+    }, []);
+    const hideLocationModal = useCallback(() => {
       setShowLocationModal(false);
-    };
+    }, []);
+
+    const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
     return (
       <div className={`flex items-center ${className || ''}`}>
@@ -61,7 +44,6 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           text={location.name}
           ariaLabel="Местоположение"
           onClick={showLocationModal}
-          bgColor={bgColor}
         />
         {officesLink ? (
           <TopItem
@@ -70,28 +52,27 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             href={officesLink}
             text="Офисы и банкоматы"
             ariaLabel="Список всех доступных офисов и банкоматов"
-            bgColor={bgColor}
           />
         ) : null}
         <HeaderSecondaryMenuButton
-          className={`mr-5 group ${COLORS_MAP[bgColor]}`}
+          className="mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white"
           ariaLabel="Поиск по сайту"
         >
           <Img
-            image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            image={{ icon: 'LoupeIcon', iconVersion }}
             className="h-full pointer-events-none"
-            imageClassName="group-hover:text-primary-hover group-hover:invert-0 pointer-events-none"
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none"
             asSVG
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`}
+          className="group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white"
           ariaLabel="Дополнительные ссылки"
         >
           <Img
-            image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            image={{ icon: 'GridIcon', iconVersion }}
             className="h-full bg-main-divider/20 rounded-full pointer-events-none"
-            imageClassName="group-hover:text-primary-hover group-hover:invert-0"
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
             asSVG
           />
         </HeaderSecondaryMenuButton>

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { DropdownMenu } from './DropdownMenu';
@@ -10,10 +9,9 @@ import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
   subItems?: LinkProps[];
-  bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }) => {
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [] }) => {
   const router = useRouter();
 
   const activeSubItem = findActiveSubItem(router)(subItems);
@@ -44,7 +42,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
             key={String(i)}
             className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
             active={_ === activeSubItem}
-            bgColor={bgColor}
             observerOptions={observerOptions}
             onVisibilityChange={subItemsVisibilityHandlers[i]}
             {..._}
@@ -56,7 +53,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
           className="absolute w-52 -top-4 right-0 pt-4 z-40"
           items={dropDownMenuItems}
           activeItem={activeSubItem}
-          bgColor={bgColor}
         />
       ) : null}
     </nav>

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -4,20 +4,18 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 
 export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
-  bgColor?: BgColorVersion;
   observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ className, active, bgColor, observerOptions, onVisibilityChange, children, ...linkProps }) => {
+  ({ className, active, observerOptions, onVisibilityChange, children, ...linkProps }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -35,7 +33,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
 
     return (
       <span ref={ref}>
-        <HeaderItem className={className} active={active} bgColor={bgColor} {...linkProps}>
+        <HeaderItem className={className} active={active} {...linkProps}>
           {children}
         </HeaderItem>
       </span>

package/mobile/src/components/Header/HeaderTop.tsx

@@ -9,6 +9,7 @@ export interface HeaderTopProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
 }
+
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
@@ -27,11 +28,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
       </button>
       <Logo className="mr-8" bgColor={bgColor} logo={logo} />
     </div>
-    <button
-      className={`${
-        bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'
-      } text-s border-0 bg-transparent cursor-pointer`}
-    >
+    <button className="text-primary-main group-data-transparent:text-white group-data-transparent:hover:text-primary-hover text-s border-0 bg-transparent">
       Войти
     </button>
   </div>

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

@@ -1,40 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
 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 { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
 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 = '',
+    className,
     title,
     description,
-    image,
-    bgColorHeadline = 'transparent',
-    align = 'text-left',
+    headlineVersion = 'XL',
+    align = 'text-center',
+    as,
+    version = '',
+    ...rest
   }) => {
-    const style = headlineStyles[bgColorHeadline];
+    const versionStyle = headlineVersionStyles[headlineVersion];
 
     return (
-      <section className={`px-4 py-6 flex flex-col gap-2.5 ${style.wrapper} ${className}`}>
+      <BlockWrapper
+        className={style('flex flex-col p-12', versionStyle.wrapper, className)}
+        version={version}
+        {...rest}
+      >
         {title ? (
-          <Heading headingType="h2" className={`${style.titleColor} ${align}`} title={title} />
+          <Heading
+            className={style('whitespace-pre-wrap', align)}
+            {...versionStyle?.title}
+            as={as || versionStyle?.title.as}
+            title={title}
+          />
         ) : null}
         {description ? (
-          <Paragraph color={style.descriptionColor || style.titleColor} size="text-m" align={align}>
+          <Paragraph
+            color="group-data-secondary:text-white/80"
+            size={versionStyle.descriptionSize as TextSize}
+            align={align}
+          >
             {description}
           </Paragraph>
         ) : null}
-        {image?.src && (
-          <div className="mt-2.5 mx-auto flex justify-center">
-            <Img image={image} />
-          </div>
-        )}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,4 +1,3 @@
-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';
@@ -11,7 +10,6 @@ export type HeadlineContent = HeadlineProps & {
   /** @title Изображение (моб.) */
   image?: Picture;
   align?: TextAlign;
-  bgColorHeadline?: BlockVersionWithTransparent;
   /** @hidden */
   as?: HeadingTagType;
 };