@redneckz/wildless-cms-uni-blocks 0.8.22 → 0.8.24

package/src/components/Tabs/Tabs.tsx

@@ -19,6 +19,14 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
+  useEffect(() => {
+    if (!tabs || !tabs[0]) {
+      return;
+    }
+
+    fireTabEvent(tabs[0]);
+  }, []);
+
   useEffect(() => {
     if (currentTab?.type === 'group') {
       defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref });
@@ -26,9 +34,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   }, [currentTab]);
 
   const handleClick = useCallback((selectedTab: TabData) => {
-    if (selectedTab?.type === 'group') {
-      defaultEventBus.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-    }
+    fireTabEvent(selectedTab);
     setCurrentTab(selectedTab);
   }, []);
 
@@ -61,3 +67,12 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
     </BlockWrapper>
   );
 });
+
+const fireTabEvent = (tab: TabData) => {
+  if (tab.type === 'group') {
+    defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
+  }
+  if (tab.type === 'link') {
+    defaultEventBus.fire('tab', { type: tab.type, label: tab.href });
+  }
+};

package/src/components/Tabs/TabsContent.ts

@@ -1,4 +1,5 @@
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 
 /**
@@ -38,7 +39,7 @@ export type TabsMode = 'wideScreen' | 'scrollable';
 /**
  * @title Вкладки
  */
-export interface TabsContent {
+export type TabsContent = UniBlockContent & {
   /** @title Табы */
   tabs?: TabData[];
   /** @title Закрепить сверху */
@@ -50,4 +51,4 @@ export interface TabsContent {
    * @default "wideScreen"
    */
   tabsMode?: TabsMode;
-}
+};

package/src/components/Tabs/renderTab.tsx

@@ -26,7 +26,13 @@ export const renderTab =
         return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
       case 'link': {
         return (
-          <LinkTab key={String(i)} tab={tab} currentTab={currentTab} isScrollable={isScrollable} />
+          <LinkTab
+            key={String(i)}
+            tab={tab}
+            currentTab={currentTab}
+            isScrollable={isScrollable}
+            onClick={onClick}
+          />
         );
       }
       default:

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -24,12 +24,11 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="pc">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="big" image={image} />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="none" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
       </div>
     </div>
@@ -38,9 +37,8 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="bc">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
       </div>
     </div>
@@ -49,9 +47,8 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="eo">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
       </div>
     </div>

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -3,57 +3,21 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockStyleMaps: Record<TextBlockVersion, Record<string, string>> = {
-  primary: {
-    background: 'bg-white',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    icon: 'bg-white text-primary-main',
-    title: 'text-white',
-    description: 'text-white',
-  },
-  'secondary-light': {
-    background: 'bg-primary-main/10',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
-};
-
 export const TextBlock = JSX<TextBlockProps>(
-  ({
-    title,
-    description,
-    blockVersion = 'primary',
-    iconVersion,
-    image,
-    className = '',
-    items,
-    isDotted = true,
-  }) => {
-    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-
+  ({ title, description, iconVersion, image, className = '', items, isDotted = true }) => {
     return (
       <section
-        className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}
+        className={`font-sans px-4 py-[18px] flex flex-col bg-white group-data-secondary:bg-primary-main ${className}`}
       >
-        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'small' ? renderIcon() : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="py-0.5">
-          {title ? (
-            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
-          ) : null}
-          {description ? (
-            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
-          ) : null}
+        <div className="py-0.5 text-secondary-text group-data-secondary:text-white">
+          {title ? <div className={`text-l font-medium mb-1`}>{title}</div> : null}
+          {description ? <div className={`text-s `}>{description}</div> : null}
           {items?.length ? (
             <List className="mt-1 text-m" items={items} isDotted={isDotted} />
           ) : null}
@@ -63,10 +27,12 @@ export const TextBlock = JSX<TextBlockProps>(
   },
 );
 
-function renderIcon(className: string) {
+function renderIcon() {
   return (
     <div className="mb-3">
-      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
+      <div className="rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main">
+        i
+      </div>
     </div>
   );
 }

package/src/components/TextBlock/TextBlock.tsx

@@ -6,43 +6,22 @@ import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockBack: Record<TextBlockVersion, string> = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-  'secondary-light': 'bg-primary-main/10',
-};
-
 export const TextBlock = JSX<TextBlockProps>(
-  ({
-    className = '',
-    title,
-    description,
-    blockVersion = 'primary',
-    iconVersion,
-    image,
-    __html,
-    ...rest
-  }) => {
-    const isSecondaryBlock = blockVersion === 'secondary';
-
+  ({ className = '', title, description, iconVersion, image, __html, ...rest }) => {
     return (
       <BlockWrapper
-        className={`px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`}
+        className={`px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10' ${className}`}
         {...rest}
       >
-        {iconVersion === 'small' ? (
-          <div className="mt-1">{renderIcon(isSecondaryBlock)}</div>
-        ) : null}
+        {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
         {iconVersion === 'big' ? renderImage(image) : null}
         <div>
-          {title ? renderTitle(title, isSecondaryBlock) : null}
-          {description ? (
-            <div className="mt-1">{renderDescription(description, isSecondaryBlock)}</div>
-          ) : null}
+          {title ? renderTitle(title) : null}
+          {description ? <div className="mt-1">{renderDescription(description)}</div> : null}
           {__html ? <RichText __html={__html} /> : null}
         </div>
       </BlockWrapper>
@@ -50,11 +29,9 @@ export const TextBlock = JSX<TextBlockProps>(
   },
 );
 
-const renderIcon = (isSecondaryBlock: boolean) => (
+const renderIcon = () => (
   <div
-    className={`rounded-full h-4 w-4 text-center text-xs-light ${
-      isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'
-    }`}
+    className={`rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
   >
     i
   </div>
@@ -62,18 +39,14 @@ const renderIcon = (isSecondaryBlock: boolean) => (
 
 const renderImage = (image?: Picture) => (image?.src ? <Img image={image} /> : null);
 
-const renderTitle = (title: string, isSecondaryBlock: boolean) => (
-  <Text
-    size="text-l"
-    font="font-medium"
-    color={isSecondaryBlock ? 'text-white' : 'text-primary-text'}
-  >
+const renderTitle = (title: string) => (
+  <Text size="text-l" font="font-medium" color="text-primary-text group-data-secondary:text-white">
     {title}
   </Text>
 );
 
-const renderDescription = (description: string, isSecondaryBlock: boolean) => (
-  <Paragraph size="text-s" color={isSecondaryBlock ? 'text-white' : 'text-secondary-text'}>
+const renderDescription = (description: string) => (
+  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
     {description}
   </Paragraph>
 );

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,5 +1,5 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { Picture } from '../../model/Picture';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
@@ -12,15 +12,15 @@ export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
  * @title Размер иконки
  * @enumNames ["Нет", "Маленькая", "Большая"]
  */
-export type TextBlockIconVersion = 'none' | 'small' | 'big';
+type TextBlockIconVersion = 'none' | 'small' | 'big';
 
 /**
  * @title Текстовый блок
  */
 export type TextBlockContent = HeadlineCommonProps &
-  RichTextProps & {
+  RichTextProps &
+  ImageContent & {
     iconVersion?: TextBlockIconVersion;
-    image?: Picture;
     blockVersion?: TextBlockVersion;
     /** @title Буллиты */ // TODO: mobile prop
     isDotted?: boolean;

package/src/components/Tile/TileContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
@@ -10,7 +10,8 @@ import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 /**
  * @title Плитка
  */
-export type TileContent = HeadingCommonProps &
+export type TileContent = UniBlockContent &
+  HeadingCommonProps &
   RichTextProps &
   ListContent &
   ButtonContent &
@@ -36,5 +37,4 @@ export type TileContent = HeadingCommonProps &
      */
     isDotted?: boolean;
     listItemSize?: ListItemSize;
-    version?: BlockVersion;
   };

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -77,6 +77,7 @@ export default {
         className="col-span-12"
         align="right"
         version="secondary"
+        isTheme={false}
         block={{
           type: 'VerticalLayout',
           blocks: [
@@ -95,6 +96,7 @@ export default {
         gap="XL"
         align="left"
         version="secondary"
+        isTheme={false}
         block={{
           type: 'VerticalLayout',
           blocks: [

package/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,18 +1,17 @@
 import type { AlignTypeWithStretch } from '../../model/AlignType';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { ColorPalette } from '../../model/ContentPageDef';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 
 /**
  * @title Вертикальный компоновщик
  */
-export interface VerticalLayoutContent {
+export type VerticalLayoutContent = UniBlockContent & {
   colorPalette?: ColorPalette;
-  version?: BlockVersion;
   align?: AlignTypeWithStretch;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;
   /** @title Отступы вложенных компонентов */
   isInnerPadding?: boolean;
-}
+};

package/src/components/Video/VideoContent.ts

@@ -1,4 +1,5 @@
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 
 /**
@@ -7,19 +8,20 @@ import type { Picture } from '../../model/Picture';
  *   "title": "Заголовок блока"
  * }
  */
-export interface VideoContent extends TitleProps {
-  /**
-   * @title Ссылка на видео
-   */
-  url?: string;
-  /**
-   * @title Заставка в блоке
-   * @default {
-   *   "format": "webp",
-   *   "size": {
-   *       "width": 1004
-   *   },
-   * }
-   */
-  previewImg?: Picture;
-}
+export type VideoContent = UniBlockContent &
+  TitleProps & {
+    /**
+     * @title Ссылка на видео
+     */
+    url?: string;
+    /**
+     * @title Заставка в блоке
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 1004
+     *   },
+     * }
+     */
+    previewImg?: Picture;
+  };

package/src/hooks/useBranches.ts

@@ -0,0 +1,43 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSON } from '../utils/fetchJSON';
+
+export interface Tariff {
+  tariffType?: string;
+  tariffValue?: number;
+}
+
+export interface SafeBoxCase {
+  safeBoxCasesSize?: string;
+  tariffs?: Tariff[];
+}
+
+export interface SafeBoxCaseVolume {
+  volume?: string;
+  safeBoxCases?: SafeBoxCase[];
+}
+
+export interface Branch {
+  branchCode?: string;
+  address?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
+}
+
+const BRANCHES_URL = '/api/v1/branches';
+const EMPTY_VALUE = [];
+
+export function useBranches(regionCode?: string): Branch[] {
+  const { data } = useAsyncData<Branch[], any, string | null>(
+    regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null,
+    fetchSafeBoxes,
+  );
+
+  return data || EMPTY_VALUE;
+}
+
+const fetchSafeBoxes = async (url: string): Promise<Branch[]> => {
+  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
+
+  return result || EMPTY_VALUE;
+};

package/src/model/HeadlineType.ts

@@ -25,6 +25,11 @@ export type LabelProps = {
   label?: string;
 };
 
+export type AdditionalDescriptionProps = {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+};
+
 export type HeadlineCommonProps = TitleProps & DescriptionProps;
 
 export type HeadlineProps = HeadlineCommonProps & {

package/src/model/JSXBlock.ts

@@ -5,13 +5,21 @@ import type { BlockVersion } from './BlockVersion';
 import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
-export interface UniBlockProps {
+export interface UniBlockProps extends UniBlockContent {
   className?: string;
-  version?: BlockVersion;
   block?: BlockDef;
   options?: BlockRendererOptions;
 }
 
+export interface UniBlockContent {
+  version?: BlockVersion;
+  /**
+   *  @title Наследование темы
+   *  @default true
+   */
+  isTheme?: boolean;
+}
+
 export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComponent<
   BlockProps,
   any,

package/src/model/LogoType.ts

@@ -1,6 +1,4 @@
-import type { Picture } from './Picture';
+import type { ImageContent } from '../ui-kit/Img/ImgProps';
+import type { TitleProps } from './HeadlineType';
 
-export type LogoType = {
-  image?: Picture;
-  title?: string;
-};
+export type LogoType = ImageContent & TitleProps;

package/src/services/sitemap/SitemapProps.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { LogoType } from '../../model/LogoType';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 
 /**
  * @title Ссылка
@@ -24,9 +24,7 @@ export interface DispositionItem extends LinkProps {
  * @title Представительства за рубежом
  * @required ["text", "href"]
  */
-export interface ForeignOffice extends LinkProps {
-  icon?: Picture;
-}
+export type ForeignOffice = LinkProps & IconProps;
 
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];

package/src/ui-kit/BlockWrapper.tsx

@@ -20,7 +20,15 @@ export const blockStyles: Record<BlockVersion, string> = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
+  ({
+    className = '',
+    version = 'primary',
+    block,
+    tag = 'section',
+    role,
+    isTheme = true,
+    children,
+  }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);
@@ -30,12 +38,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () =>
         defaultEventBus.subscribe('tab', (event) => {
           setHidden(
-            Boolean(
-              event.type === 'group' &&
-                event.label &&
-                block?.labels?.length &&
-                !block.labels.includes(event.label),
-            ),
+            Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)),
           );
         }),
       [block],
@@ -43,8 +46,13 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
 
     return (
       <Tag
-        className={style('group', blockStyles[version], isHidden ? 'hidden' : '', className)}
-        {...(version ? { 'data-ver': version } : {})}
+        className={style(
+          isTheme ? 'group' : '',
+          blockStyles[version],
+          isHidden ? 'hidden' : '',
+          className,
+        )}
+        {...(version && isTheme ? { 'data-ver': version } : {})}
         {...(block?.anchor ? { id: block.anchor, ref } : {})}
         role={role}
       >

package/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -24,6 +24,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     children,
     onVisibleIndicesChange,
     listType = 'horizontal-list',
+    version,
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 
@@ -53,6 +54,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
             activeIndex={activeIndex}
             dotCount={itemCount}
             listType={listType}
+            version={version}
           />
         ) : null}
       </div>

package/src/ui-kit/SwipeListControl/SwipeListControlContent.ts

@@ -1,11 +1,11 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { SwipeContainerProps } from './SwipeListControlProps';
 
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlContent extends SwipeContainerProps {
-  /** @title Точки-индикаторы */
-  showDots?: boolean;
-  version?: BlockVersion;
-}
+export type SwipeListControlContent = UniBlockContent &
+  SwipeContainerProps & {
+    /** @title Точки-индикаторы */
+    showDots?: boolean;
+  };

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { style } from '../../utils/style';
 import type { SwipeListControlType } from './SwipeListControlProps';
 
 const containerStyles: Record<SwipeListControlType, string> = {
@@ -12,7 +14,7 @@ const activeDotStyles: Record<SwipeListControlType, string> = {
 };
 
 const dotStyle =
-  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
+  'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 
@@ -21,10 +23,11 @@ interface SwipeListControlDotsProps {
   activeIndex?: number;
   dotCount?: number;
   listType?: SwipeListControlType;
+  version?: BlockVersion;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
+  ({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
     const handleClick = (idx: number) => {
       if (idx !== activeIndex && containerRef?.current) {
         containerRef.current.children[idx]?.scrollIntoView({
@@ -35,7 +38,10 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
     };
 
     return dotCount ? (
-      <div className={`flex gap-2 ${containerStyles[listType]}`}>
+      <div
+        className={style('flex gap-2', containerStyles[listType], version ? 'group' : '')}
+        {...(version ? { 'data-ver': version } : {})}
+      >
         {new Array(dotCount).fill(null).map((_, idx: number) => (
           <div
             key={String(idx)}

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

@@ -1,4 +1,4 @@
-import { BlockVersionMolecule } from '../../model/BlockVersion';
+import type { BlockVersionMolecule } from '../../model/BlockVersion';
 
 /**
  * @title Размер текста