@redneckz/wildless-cms-uni-blocks 0.3.80 → 0.3.82

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -21,15 +21,18 @@ const renderBlock =
     if (!type || !(type in EmbeddableBlocks)) {
       return null;
     }
-    const classNameBlock = style2className(block?.style);
+
+    const { style, ...rest } = block;
+
+    const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
 
     return (
       <EmbeddedBlock
         key={`block_${i}`}
-        context={context}
-        {...block}
         className={`${className} ${classNameBlock}`}
+        context={context}
+        {...rest}
       />
     );
   };

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -26,7 +26,7 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
-  /** @title Иконка */
+  /** @title Иконка слева */
   icon?: Picture;
   /** @title Иконка справа */
   iconRight?: Picture;
@@ -49,3 +49,16 @@ export interface ButtonContent {
    */
   buttons?: ButtonWithIconProps[];
 }
+
+export interface BackwardButtonProps extends ButtonProps {
+  /** @title Иконка */
+  icon?: Picture;
+  /** @title Верхний текст */
+  aboveText?: string;
+  /** @hidden */
+  appendLeft?: any;
+  /** @title Закругленные углы */
+  rounded?: boolean;
+  /** @hidden */
+  asSVG?: boolean;
+}

package/mobile/src/utils/changeHashOnObserve.ts

@@ -0,0 +1,10 @@
+export const changeHashOnObserve = (entries: IntersectionObserverEntry[]) => {
+  if (!entries.length) {
+    return;
+  }
+  const [entry] = entries;
+
+  if (entry.isIntersecting) {
+    // Here must be logic for block intersection event
+  }
+};

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignType } from '../../model/AlignType';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
-import { AlignType } from '../../model/AlignType';
 
 const ALIGN_TITLE: Record<AlignType, string> = {
   left: 'text-left',
@@ -20,11 +21,15 @@ export const Accordion = JSX<AccordionProps>(
     accordionItems,
     context,
     className = '',
-    anchor = null,
     accordionAlignTitle = 'center',
+    ...rest
   }) => {
     return (
-      <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
+      <BlockWrapper
+        context={context}
+        className={`p-[50px] font-sans bg-white text-primary-text ${className}`}
+        {...rest}
+      >
         {title ? (
           <Heading
             headingType="h4"
@@ -40,7 +45,7 @@ export const Accordion = JSX<AccordionProps>(
             ))}
           </ul>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/BaseTile/BaseTile.tsx

@@ -5,9 +5,9 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image, anchor = null }) => {
+  ({ className = '', title, children, buttons, image }) => {
     return (
-      <div className={`font-sans flex flex-col grow h-full items-start ${className}`} id={anchor}>
+      <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">

package/src/components/BenefitsBlock/BenefitsBlock.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,11 +9,11 @@ import { DescriptionType, ListBenefitDef, TextBenefitDef } from './BenefitsBlock
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', headingType = 'h2', title, benefitList, anchor = null }) => {
+  ({ className = '', headingType = 'h2', title, benefitList, ...rest }) => {
     return (
-      <section
+      <BlockWrapper
         className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
-        id={anchor}
+        {...rest}
       >
         {title ? (
           <Heading
@@ -23,7 +24,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
           />
         ) : null}
         {benefitList?.length ? renderBenefits(benefitList) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Bonus/Bonus.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 type { BonusContent } from './BonusContent';
@@ -6,10 +7,10 @@ import type { BonusContent } from './BonusContent';
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>((props) => {
-  const { className = '', title, description, bonusItems, anchor = null } = props;
+  const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <section className={`font-sans bg-white p-[50px] pb-9 ${className}`} id={anchor}>
+    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
       <div className="container">
         {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
         {description ? (
@@ -47,6 +48,6 @@ export const Bonus = JSX<BonusProps>((props) => {
             : null}
         </div>
       </div>
-    </section>
+    </BlockWrapper>
   );
 });

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.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,11 +9,11 @@ import { getElementsColsValue } from './getElementsColsValue';
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
+  ({ className = '', title, subtitle, bonusBenefits, ...rest }) => {
     return (
-      <section
+      <BlockWrapper
         className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
-        id={anchor}
+        {...rest}
       >
         {title ? <Heading headingType="h3" className="mb-[10px]" title={title} /> : null}
         {subtitle ? <span className="text-md font-normal">{subtitle}</span> : null}
@@ -21,7 +22,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
             {bonusBenefits.map(renderBonusBenefit)}
           </div>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Calculator/Calculator.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { FuncReturnVoid, UniBlockProps } from '../../types';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
@@ -22,7 +23,7 @@ type NavButtonProps = {
 };
 
 export const Calculator = JSX<CalculatorProps>(
-  ({ className = '', context, calcTabs = [], anchor = null }) => {
+  ({ className = '', context, calcTabs = [], ...rest }) => {
     const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
     const blockCalcTabs = calcTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
@@ -38,9 +39,10 @@ export const Calculator = JSX<CalculatorProps>(
     const showPrevButton = tabsShift > 0;
 
     return (
-      <section
-        id={anchor}
+      <BlockWrapper
+        context={context}
         className={`box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`}
+        {...rest}
       >
         <div>
           {tabsNav.length > 1
@@ -62,7 +64,7 @@ export const Calculator = JSX<CalculatorProps>(
             ? blockCalcTabs.map(renderCalculatorBlock({ context, className }))
             : null}
         </div>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Catalog/Catalog.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -14,13 +15,14 @@ const CARD_FULL_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
-  ({ context, cards = [], className = '', title, description, anchor = null }) => {
+  ({ context, cards = [], className = '', title, description, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
-        id={anchor}
+        {...rest}
       >
         {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
         {description ? <Description className="mb-6" description={description} /> : null}
@@ -38,7 +40,7 @@ export const Catalog = JSX<CatalogProps>(
         })}
         <div className={`${BLUR_BLOCK_CLASSES} left-0 ${'bg-opacity-from-white'}`} />
         <div className={`${BLUR_BLOCK_CLASSES} right-0 ${'bg-opacity-to-white'}`} />
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/ComparisonTable/ComparisonTable.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 { ComparisonTableBody } from './ComparisonTableBody';
@@ -16,17 +17,18 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
-    anchor = null,
+    ...rest
   }) => {
     const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
           className || ''
         }`}
-        id={anchor}
+        {...rest}
       >
         <Heading
           headingType="h2"
@@ -44,7 +46,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         {visibleRowLength
           ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
           : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/ContentPage/ContentPage.tsx

@@ -1,7 +1,5 @@
 import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
-import { changeHashOnScroll } from '../../utils/changeHashOnScroll';
-import { isSSR } from '../../utils/isSSR';
 import { style2className } from '../../utils/style2className';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
@@ -39,8 +37,6 @@ export interface RenderBlockFunc {
   context: ContentPageContext;
 }
 
-const isClient = !isSSR();
-
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
@@ -53,16 +49,6 @@ export const ContentPage = JSX<ContentPageProps>(
     blockDecorator = defaultBlockDecorator,
   }) => {
     const { header } = slots;
-    const router = context.useRouter();
-
-    // listener is for NavigatorTabs
-    isClient &&
-      globalThis.addEventListener('load', () => {
-        const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
-        globalThis.document.addEventListener('scroll', () =>
-          changeHashOnScroll(router, sectionsWithAnchors),
-        );
-      });
 
     return (
       <section

package/src/components/ContentPage/ContentPageContext.tsx

@@ -31,12 +31,15 @@ export type AsyncDataHook = <Data, Err = any>(
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];
 
 export type SetStateAction<S> = S | ((prevState: S) => S);
+
 export type SetStateHook = <State>(
   initialState: State | (() => State),
 ) => [State, FuncReturnVoid<SetStateAction<State>>];
 
 export interface IntersectionObserverTagProps {
   Tag: string;
+  className?: string;
+  anchor?: string;
   children?: VNode;
   observerCallback: IntersectionObserverCallback;
   observerOptions?: IntersectionObserverInit;

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useExchangeRates } from '../../hooks/useExchangeRates';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -18,7 +19,7 @@ const DEFAULT_LOCATION = {
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
-  ({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
+  ({ className = '', context, title = 'Курсы обмена валют', ...rest }) => {
     const currencyRates = useExchangeRates(context.useAsyncData);
 
     const currencyRatesBuy = currencyRates.filter((_) => _.buy);
@@ -28,9 +29,10 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     currencyRatesSell.push({ code: Currency.RUB });
 
     return (
-      <section
+      <BlockWrapper
+        context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}
-        id={anchor}
+        {...rest}
       >
         <BaseTile
           context={context}
@@ -59,7 +61,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
             ) : null}
           </div>
         </BaseTile>
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
@@ -23,10 +24,15 @@ export const Footer = JSX<FooterProps>(
     mobileApps,
     topItems,
     context,
-    anchor = null,
+    ...rest
   }) => {
     return (
-      <footer className={`p-9 bg-white ${className || ''}`} id={anchor}>
+      <BlockWrapper
+        Tag="footer"
+        context={context}
+        className={`p-9 bg-white ${className || ''}`}
+        {...rest}
+      >
         <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
           <Logo className={LEFT_COL_WIDTH_FULL_HD} />
           <SearchBar context={context} className="grow" />
@@ -45,7 +51,7 @@ export const Footer = JSX<FooterProps>(
         </div>
         <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} context={context} />
         <TextInformation links={documents} context={context} />
-      </footer>
+      </BlockWrapper>
     );
   },
 );

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>
     );
   },
 );