@redneckz/wildless-cms-uni-blocks 0.3.79 → 0.3.81

package/src/components/Gallery/GalleryInner.tsx

@@ -1,17 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
-import type { GalleryContent } from './GalleryContent';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', anchor = null, ...rest }) => {
+  ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -26,9 +27,10 @@ export const GalleryInner = JSX<GalleryInnerProps>(
     const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`}
-        id={anchor}
+        {...rest}
       >
         <GalleryContainer
           context={context}
@@ -45,7 +47,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         })}
         <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
         <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/GracePeriod/GracePeriod.tsx

@@ -2,19 +2,20 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { GracePeriodContent } from './GracePeriodContent';
 
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 
 export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
-  ({ className = '', title, description, calendar, anchor = null }) => {
+  ({ className = '', title, description, calendar, ...rest }) => {
     return (
-      <section className={`font-sans bg-white p-[50px] ${className}`} id={anchor}>
+      <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
         <Heading headingType="h3" className="text-center" title={title} />
         <div className="font-light text-base-md text-center mt-3">{description}</div>
         {calendar ? renderCalendar(calendar) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/GroupBlock/GroupBlock.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { filterBlocksByTag } from './filterBlocksByTag';
 import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
-import { GroupBlockTabs } from './GroupBlockTabs';
 import { GroupBlocksItem } from './GroupBlocksItem';
-import { filterBlocksByTag } from './filterBlocksByTag';
+import { GroupBlockTabs } from './GroupBlockTabs';
 
 export interface TabsItemProps extends GroupBlockTab {
   count?: number;
@@ -14,7 +15,7 @@ export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
 }
 
 export const GroupBlock = JSX<GroupBlockProps>(
-  ({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
+  ({ className = '', tabs, context, groupBlocks = [], isShowCounter, ...rest }) => {
     const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
 
     const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
@@ -28,7 +29,7 @@ export const GroupBlock = JSX<GroupBlockProps>(
     });
 
     return (
-      <section id={anchor} className={`box-border gap-1 ${className}`}>
+      <BlockWrapper context={context} className={`box-border gap-1 ${className}`} {...rest}>
         {tabsNewMap?.length ? (
           <GroupBlockTabs
             currentTag={currentTag}
@@ -40,7 +41,7 @@ export const GroupBlock = JSX<GroupBlockProps>(
         {groupBlocks.length ? (
           <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import type { HeaderContent } from './HeaderContent';
@@ -26,8 +27,8 @@ export const Header = JSX<HeaderProps>(
     bgColor = 'bg-white',
     context,
     topItems,
-    anchor = null,
     logo,
+    ...rest
   }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
@@ -47,7 +48,12 @@ export const Header = JSX<HeaderProps>(
     ));
 
     return (
-      <header className={`pt-6 pb-8 px-20 ${bgColor} ${className}`} id={anchor}>
+      <BlockWrapper
+        Tag="header"
+        context={context}
+        className={`pt-6 pb-8 px-20 ${bgColor} ${className}`}
+        {...rest}
+      >
         <div className="container">
           <div className="flex items-center">
             <Logo className="mr-8" bgColor={bgColor} logo={logo} />
@@ -64,7 +70,7 @@ export const Header = JSX<HeaderProps>(
             <HeaderSubMenu context={context} subItems={activeTopItem.items} bgColor={bgColor} />
           ) : null}
         </div>
-      </header>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Headline/Headline.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
@@ -14,15 +15,15 @@ export const Headline = JSX<HeadlineProps>(
     className = '',
     title,
     description,
-    anchor = null,
     headingType = 'h2',
+    ...rest
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
 
     return (
-      <section
+      <BlockWrapper
         className={`p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`}
-        id={anchor}
+        {...rest}
       >
         {title ? (
           <Heading
@@ -34,7 +35,7 @@ export const Headline = JSX<HeadlineProps>(
         {description ? (
           <p className={`text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>{description}</p>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Insurance/Insurance.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -8,9 +9,12 @@ import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
 export const Insurance = JSX<InsuranceProps>(
-  ({ className = '', title, description, image, benefits, sum, monthLimit }) => {
+  ({ className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
     return (
-      <section className={`px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`}>
+      <BlockWrapper
+        className={`px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`}
+        {...rest}
+      >
         {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
         {description ? <div className="text-center text-md mt-3">{description}</div> : null}
         <div>
@@ -24,7 +28,7 @@ export const Insurance = JSX<InsuranceProps>(
             </div>
           </div>
         </div>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,20 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Button } from '../../ui-kit/Button/Button';
 
 export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
+  ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
-      <section
-        id={anchor}
+      <BlockWrapper
+        context={context}
         className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
+        {...rest}
       >
         {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
         <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
@@ -49,7 +51,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
             </Button>
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps, FuncReturnVoid } from '../../types';
-import type { InsuranceAmountBlockTabs, CardItem } from './InsuranceAmountBlockContent';
+import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
 
@@ -23,7 +23,7 @@ type InsuranceSlideProps = {
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
-  ({ className = '', context, cards = [], anchor = null }) => {
+  ({ className = '', context, cards = [] }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
     const [tabsShift, setTabsShift] = context.useState(0);
 
@@ -38,7 +38,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const showPrevButton = tabsShift > 0;
 
     return (
-      <section id={anchor} className={`min-w-full ${className}`}>
+      <section className={`min-w-full ${className}`}>
         <div className="relative mt-7 overflow-hidden">
           {galleryLength
             ? renderGallery({

package/src/components/LikeControl/LikeControl.tsx

@@ -1,16 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { LikeButton } from '../../ui-kit/Button/LikeButton';
 
-export const LikeControl = JSX<UniBlockProps>(({ className, context, anchor = null }) => {
+export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest }) => {
   const likeService = context.useLikeService();
 
   return (
-    <div
+    <BlockWrapper
+      Tag="div"
+      context={context}
       className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
         className || ''
       }`}
-      id={anchor}
+      {...rest}
     >
       <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
       <LikeButton
@@ -19,6 +22,6 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context, anchor = nu
         ariaLabel="Поставить отметку «дизлайк»"
       />
       <span className="select-none">{likeService.likeCount}</span>
-    </div>
+    </BlockWrapper>
   );
 });

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
@@ -21,10 +22,14 @@ export const LinkDocs = JSX<LinkDocsProps>(
     documents,
     icon = { icon: 'DocIcon' },
     columnsMode = 'double',
-    anchor = null,
+    ...rest
   }) => {
     return (
-      <section className={`font-sans text-primary-text p-[50px] bg-white ${className}`} id={anchor}>
+      <BlockWrapper
+        context={context}
+        className={`font-sans text-primary-text p-[50px] bg-white ${className}`}
+        {...rest}
+      >
         <Headline
           className="!p-0"
           title={title}
@@ -39,7 +44,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
           documents={documents}
           icon={icon}
         />
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/LinkList/LinkList.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import type { LinkListContent } from './LinkListContent';
 
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
-export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor = null }) => {
+export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => {
   return (
-    <section className={`font-sans bg-white mt-[10px] ${className}`} id={anchor}>
+    <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
       <ul className="flex flex-col text-sm text-secondary-text p-0">
         {documents?.length ? renderLinkListItem(documents) : null}
       </ul>
-    </section>
+    </BlockWrapper>
   );
 });
 

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -24,20 +25,21 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     title = 'Мобильное приложение',
     qr,
     buttons,
-    anchor = null,
     version = 'primary',
     items,
     image,
+    ...rest
   }) => {
     const textColorClass = version === 'primary' ? 'text-primary-text' : '';
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`flex justify-between font-sans p-9 box-border relative
         ${getTileRightPadding(className)} ${getTileMinHeight(className)}
         ${mobileAppStyleMap[version]}
         ${className}`}
-        id={anchor}
+        {...rest}
       >
         <BaseTile
           context={context}
@@ -78,7 +80,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             <Img image={image} />
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import type { UniBlockProps } from '../../types';
 import { NavigationContent } from './NavigationContent';
@@ -8,20 +9,21 @@ import { NavigationItem } from './NavigationItem';
 export interface NavigationProps extends NavigationContent, UniBlockProps {}
 
 export const Navigation = JSX<NavigationProps>(
-  ({ className, context, title, buttons, anchor = null }) => {
+  ({ className, context, title, buttons, ...rest }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
 
     const activeButton = findActiveSubItem(router)(buttons);
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`font-sans text-primary-text rounded-[40px] flex items-center justify-between ${
           className || ''
         }`}
-        id={anchor}
+        {...rest}
       >
-        <h2 className="font-medium text-xl m-0">{title}</h2>
+        <h2 className="font-medium text-xl-light m-0">{title}</h2>
         {buttons?.length ? (
           <div className="flex rounded-md overflow-hidden bg-white">
             {buttons
@@ -36,7 +38,7 @@ export const Navigation = JSX<NavigationProps>(
               ))}
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -11,7 +11,7 @@ const TEXT_CLASSES = 'font-sans font-normal text-m-md';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', text, active, children, onClick, href, target = '_self' }) => (
+  ({ className = '', text, active, onClick, href, target = '_self', children }) => (
     <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
       <span className={getTextClasses(active)}>{text || children}</span>
     </a>

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { LinkProps } from '../../model/LinkProps';
+import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { getHash } from '../../utils/url';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
@@ -10,30 +11,29 @@ import type { NavigatorTabsContent } from './NavigatorTabsContent';
 export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
-  ({ className = '', navigatorTabs, context, anchor = null }) => {
-    const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
-
+  ({ className = '', navigatorTabs, context, ...rest }) => {
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`}
-        id={anchor}
+        {...rest}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null}
-      </section>
+        {navigatorTabs ? navigatorTabs.map(renderTab(context)) : null}
+      </BlockWrapper>
     );
   },
 );
 
-const renderTab = (context: ContentPageContext, href?: string) => (tab: LinkProps, i: number) => {
-  const { useRouter, handlerDecorator } = context;
-  const router = useRouter();
+const renderTab = (context: ContentPageContext) => (tab: LinkProps, i: number) => {
+  const { handlerDecorator, useRouter } = context;
 
-  const hash = getHash(href);
+  const router = useRouter();
+  const hash = getHash(router.href);
   const active = hash ? tab.href === hash : i === 0;
 
   return (
     <NavigatorTabItem
-      key={tab.href}
+      key={tab.text}
       active={active}
       {...useLink({ router, handlerDecorator }, tab)}
     />

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,14 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
 import { OtherProductsItem } from './OtherProductsItem';
 
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts = JSX<OtherProductsProps>(
-  ({ blockItems, colorPalette, context, className = '' }) => {
+  ({ blockItems, colorPalette, context, className = '', ...rest }) => {
     return (
-      <section className={`font-sans text-primary-text ${className}`}>
+      <BlockWrapper
+        context={context}
+        className={`font-sans text-primary-text ${className}`}
+        {...rest}
+      >
         {blockItems?.length ? (
           <div className="box-border1">
             {blockItems.map((item, i) => (
@@ -21,7 +26,7 @@ export const OtherProducts = JSX<OtherProductsProps>(
             ))}
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/PictureText/PictureText.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { PictureTextContent, PictureTextBenefit } from './PictureTextContent';
+import type { PictureTextBenefit, PictureTextContent } from './PictureTextContent';
 
 import { BlockVersion } from '../../model/BlockVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 
@@ -21,12 +22,12 @@ export const PictureText = JSX<PictureTextProps>(
     benefits,
     version = 'primary',
     directionRight = false,
-    anchor = null,
+    ...rest
   }) => {
     return (
-      <section
+      <BlockWrapper
         className={`relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`}
-        id={anchor}
+        {...rest}
       >
         <Heading headingType="h2" className="text-center" title={title} />
         <div className={'flex justify-center mt-9'}>
@@ -37,7 +38,7 @@ export const PictureText = JSX<PictureTextProps>(
             </div>
           ) : null}
         </div>
-      </section>
+      </BlockWrapper>
     );
   },
 );
@@ -57,7 +58,7 @@ function renderBenefit(benefit: PictureTextBenefit, i: number, version: string)
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit?.label ? (
           <div
-            className={`font-medium text-xl m-0 ${
+            className={`font-medium text-xl-light m-0 ${
               version === 'primary' ? 'text-primary-text' : ''
             }`}
           >

package/src/components/Placeholder/Placeholder.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -15,13 +16,14 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
+  ({ className, context, title, description = 'Блок в разработке...', ...rest }) => {
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
           className,
         )} ${getTileMinHeight(className)} `}
-        id={anchor}
+        {...rest}
       >
         <BaseTile
           context={context}
@@ -40,7 +42,7 @@ export const Placeholder = JSX<PlaceholderProps>(
           ) : null}
           <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
         </BaseTile>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
 import type { ProductBlockBenefit, ProductBlockContent } from './ProductBlockContent';
 
@@ -62,7 +62,7 @@ const items = [
   'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
 ];
 
-const backwardButton: ButtonWithIconProps = {
+const backwardButton: BackwardButtonProps = {
   href: 'https://rshb.ru',
   text: 'Все кредитные карты',
   icon: { icon: 'ArrowLeftIcon' },