@redneckz/wildless-cms-uni-blocks 0.8.21 → 0.8.23

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -1,35 +1,36 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends BenefitsProps, HeadlineCommonProps {
-  /**
-   * @default {
-   *   "format": "webp",
-   *   "size": {
-   *       "width": 400
-   *   },
-   *   "sources": [{
-   *       "media": 1279,
-   *       "width": 240,
-   *       "format": "webp",
-   *       "alignment": "center"
-   *   }]
-   * }
-   */
-  image?: Picture;
-  /**
-   * @title Картинка справа/текст слева
-   * @default false
-   */
-  directionRight?: boolean;
-  /** @title Ежемесячный лимит */
-  monthLimit?: number;
-  /** @title Страховая сумма */
-  sum?: number;
-  version?: BlockVersion;
-}
+export type PictureTextContent = UniBlockContent &
+  BenefitsProps &
+  HeadlineCommonProps & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 400
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *       "width": 240,
+     *       "format": "webp",
+     *       "alignment": "center"
+     *   }]
+     * }
+     */
+    image?: Picture;
+    /**
+     * @title Картинка справа/текст слева
+     * @default false
+     */
+    directionRight?: boolean;
+    /** @title Ежемесячный лимит */
+    monthLimit?: number;
+    /** @title Страховая сумма */
+    sum?: number;
+  };

package/mobile/src/components/PictureText/renderBenefit.tsx

@@ -1,4 +1,4 @@
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { RichText } from '../../ui-kit/RichText/RichText';

package/mobile/src/components/Placeholder/PlaceholderContent.ts

@@ -1,6 +1,7 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @hidden
  */
-export type PlaceholderContent = HeadlineCommonProps;
+export type PlaceholderContent = UniBlockContent & HeadlineCommonProps;

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,7 +1,7 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
@@ -42,7 +42,6 @@ export type ProductBlockInnerContent = HeadlineProps &
      */
     benefits?: BenefitItemProps[];
     benefitsVersion?: IconVersion;
-    version?: BlockVersion;
     /**
      *  @title Буллиты
      *  @default true
@@ -60,9 +59,10 @@ export type ProductBlockInnerContent = HeadlineProps &
 /**
  * @title Продуктовый блок
  */
-export interface ProductBlockContent extends ProductBlockInnerContent {
-  /** @title Хлебные крошки */
-  breadcrumbs?: LinkProps[];
-  /** @title Кнопка возврата */
-  backwardButton?: BackwardButtonProps;
-}
+export type ProductBlockContent = UniBlockContent &
+  ProductBlockInnerContent & {
+    /** @title Хлебные крошки */
+    breadcrumbs?: LinkProps[];
+    /** @title Кнопка возврата */
+    backwardButton?: BackwardButtonProps;
+  };

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -22,14 +22,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     buttons,
     image,
     items,
-    version = 'primary',
     isDotted = true,
     label,
     title,
     description,
     ...rest
   }) => (
-    <BlockWrapper className={`w-full ${className}`} version={version} {...rest}>
+    <BlockWrapper className={`w-full ${className}`} {...rest}>
       <div>
         {label ? renderLabel(label) : null}
         <Headline
@@ -41,7 +40,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
         />
         <BaseTile buttons={renderButtonsSection(buttons, { className: 'mt-5', isVertical: true })}>
           {benefits?.filter((_) => _.label)?.length ? (
-            <div className="mt-3">{benefits.map(renderBenefit(version, benefitsVersion))}</div>
+            <div className="mt-3">{benefits.map(renderBenefit('primary', benefitsVersion))}</div>
           ) : null}
           {items?.length ? (
             <List className="mt-3 text-m" items={items} isDotted={isDotted} />

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -17,7 +17,7 @@ interface NavButtonProps {
 }
 
 export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className = '', slides = [], version = 'primary', ...rest }) => {
+  ({ className = '', slides = [], ...rest }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
@@ -26,7 +26,6 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     return (
       <BlockWrapper
         className={`box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`}
-        version={version}
         {...rest}
       >
         <div
@@ -34,7 +33,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i))}
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
         </div>
 
         <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28">
@@ -52,7 +51,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i: number) {
+function renderProductBlock(block: ProductBlockInnerContent, i: number) {
   return (
     <section
       key={String(i)}

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 
 /** @title Кнопка под слайдом */
@@ -22,11 +22,10 @@ export interface ProductSlide {
 /**
  * @title Продуктовая галерея
  */
-export interface ProductGalleryContent {
+export type ProductGalleryContent = UniBlockContent & {
   /**
    * @title Слайды
    * @minItems 2
    */
   slides?: ProductSlide[];
-  version?: BlockVersion;
-}
+};

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -1,6 +1,11 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
-import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
+import type {
+  AdditionalDescriptionProps,
+  DescriptionProps,
+  HeadlineProps,
+  LabelProps,
+} from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { RichTextItem } from '../../model/RichTextItem';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
@@ -21,7 +26,9 @@ export type Benefit = TextBenefit | RichTextItem;
 /**
  * @title Продуктовая плитка
  */
-export type ProductTileContent = HeadlineProps &
+export type ProductTileContent = UniBlockContent &
+  HeadlineProps &
+  AdditionalDescriptionProps &
   ButtonContent & {
     /**
      * @default {
@@ -38,14 +45,11 @@ export type ProductTileContent = HeadlineProps &
      * }
      */
     image?: Picture;
-    version?: BlockVersion;
     /**
      * @title Преимущества
      * @maxItems 7
      */
     benefits?: Benefit[];
-    /** @title Дополнительное описание */
-    additionalDescription?: string;
     /** @title Картинка справа/текст слева */
     isImageOnRightSide?: boolean;
   };

package/mobile/src/components/PromoTile/PromoTileContent.ts

@@ -1,15 +1,15 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Акции
  */
-export type PromoTileContent = HeadingCommonProps &
+export type PromoTileContent = UniBlockContent &
+  HeadingCommonProps &
   DescriptionProps &
   ButtonContent & {
     /** @title Дата публикации */
     date?: string;
-    version?: BlockVersion;
   };

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -1,5 +1,5 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
@@ -46,8 +46,8 @@ export interface RecommendationCardTypes extends HeadlineCommonProps, ListConten
 /**
  * @title Рекомендации
  */
-export interface RecommendationContent extends TitleProps {
-  /** @title Карточки */
-  recommendations?: RecommendationCardTypes[];
-  version?: BlockVersion;
-}
+export type RecommendationContent = UniBlockContent &
+  TitleProps & {
+    /** @title Карточки */
+    recommendations?: RecommendationCardTypes[];
+  };

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import { BlockVersion } from '../../model/BlockVersion';
-import type { JSXBlock } from '../../model/JSXBlock';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -10,7 +10,9 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { RollupItemProps } from './RollupItemProps';
+import type { RollupItemContent } from './RollupItemContent';
+
+export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({

package/mobile/src/components/RollupItem/RollupItemContent.ts

@@ -1,13 +1,13 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { LabelProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Сворачивающаяся секция
  */
-export type RollupItemContent = LabelProps & {
-  /** @title Отображать в раскрытом виде */
-  isExpanded?: boolean;
-  /** @title Кнопка сверху */
-  isFoldButtonOnTop?: boolean;
-  version?: BlockVersion;
-};
+export type RollupItemContent = UniBlockContent &
+  LabelProps & {
+    /** @title Отображать в раскрытом виде */
+    isExpanded?: boolean;
+    /** @title Кнопка сверху */
+    isFoldButtonOnTop?: boolean;
+  };

package/mobile/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,7 +1,8 @@
 import type { Footnote } from '../../model/Footnote';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Аренда сейфовых ячеек
  */
-export type SafeDepositRentalContent = Footnote & TitleProps;
+export type SafeDepositRentalContent = UniBlockContent & Footnote & TitleProps;

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -4,6 +4,8 @@
     "title": "Шаги",
     "description": "Описание",
     "showLines": true,
+    "size": "normal",
+    "stepVersion": "gray",
     "steps": [
       {
         "label": "Шаг №1",
@@ -20,7 +22,7 @@
           "text": "Кнопка",
           "target": "_blank",
           "version": "primary"
-        }
+        } 
       },
       {
         "label": "Шаг №2",

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -10,7 +10,7 @@ import { assertUnreachable } from '../../utils/assertUnreachable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
-import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -24,6 +24,8 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-12',
 };
 
+const styleMap = STEPS_BLOCK_STYLE;
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
@@ -34,31 +36,27 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
     ...rest
-  }) => {
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
-
-    return (
-      <BlockWrapper
-        className={`box-border px-4 py-6 flex flex-col ${className}`}
-        version={version}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
-        {description ? (
-          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-            {description}
-          </p>
-        ) : null}
-        {steps?.length ? (
-          <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-            <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map(renderStep(size, version, showLines))}
-            </div>
+  }) => (
+    <BlockWrapper
+      className={`box-border px-4 py-6 flex flex-col ${className}`}
+      version={version}
+      {...rest}
+    >
+      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {description ? (
+        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          {description}
+        </p>
+      ) : null}
+      {steps?.length ? (
+        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
+          <div className="flex flex-col justify-between gap-x-[101px]">
+            {steps.map(renderStep(size, version, showLines))}
           </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 // TODO: Create universal function for this case
@@ -88,7 +86,6 @@ const renderDefaultStep =
   (step: DefaultStep, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -119,7 +116,6 @@ const renderDefaultStep =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
@@ -36,7 +37,7 @@ export type Step = DefaultStep | RichTextStep;
 /**
  * @title Блок шаги
  */
-export type StepsBlockContent = HeadlineCommonProps & {
+export type StepsBlockContent = UniBlockContent & HeadlineCommonProps & {
   /**
    * @title Линии
    * @default true
@@ -48,12 +49,12 @@ export type StepsBlockContent = HeadlineCommonProps & {
    * @maxItems 5
    */
   steps?: Step[];
+  stepVersion?: BlockVersion;
   /** @title Кнопка */
   button?: ButtonWithIconProps;
   /**
-   * @title Размер шагов (моб.)
+   * @title Размер шагов
    * @default normal
    */
   size?: SizeVersion; // TODO: mobile content
-  version?: BlockVersion;
 };

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,5 +1,3 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-
 export type StyleType = {
   description: string;
   iconText: string;
@@ -8,42 +6,10 @@ export type StyleType = {
   dot: string;
 };
 
-export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    description: '!text-secondary-text text-l-light',
-    iconText: 'text-secondary-text',
-    iconBackground: 'bg-main-divider',
-    iconConnector: 'bg-secondary-light',
-    dot: 'bg-secondary-text',
-  },
-  secondary: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  gray: {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  transparent: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  '': {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
+export const STEPS_BLOCK_STYLE: StyleType = {
+  description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
+  iconText: 'text-white group-data-primary:text-secondary-text',
+  iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
+  iconConnector: 'bg-white group-data-primary:bg-secondary-light',
+  dot: 'bg-white/80 group-data-primary:bg-secondary-text',
 };

package/mobile/src/components/SwipeListControlBlock/SwipeListControlBlock.tsx

@@ -8,10 +8,10 @@ import type { SwipeListControlBlockContent } from './SwipeListControlBlockConten
 interface SwipeListControlBlockProps extends SwipeListControlBlockContent, UniBlockProps {}
 
 export const SwipeListControlBlock: JSXBlock<SwipeListControlBlockProps> =
-  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, ...rest }) => {
+  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, version, ...rest }) => {
     return (
-      <BlockWrapper {...rest}>
-        <SwipeListControl listType={listType} showDots={showDots}>
+      <BlockWrapper version={version} {...rest}>
+        <SwipeListControl listType={listType} showDots={showDots} version={version}>
           {renderChildren({ ...rest, options })}
         </SwipeListControl>
       </BlockWrapper>

package/mobile/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/mobile/src/components/TextBlock/TextBlock.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>
   );
 }