@redneckz/wildless-cms-uni-blocks 0.3.94 → 0.3.96

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Кнопка выбора программы
@@ -32,4 +33,6 @@ export interface InsuranceAmountBlockContent {
   title?: string;
   /** @title Список вкладок */
   insuranceTabs?: InsuranceAmountBlockTabs[];
+  /** @title Кнопка */
+  button?: ButtonProps;
 }

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,12 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
 
-export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {
+  button?: ButtonProps;
+}
 
 type InsuranceGalleryProps = {
   tabsShift: number;
@@ -24,7 +27,7 @@ type InsuranceSlideProps = {
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
-  ({ className = '', context, cards = [] }) => {
+  ({ className = '', context, cards = [], button }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
     const [tabsShift, setTabsShift] = context.useState(0);
 
@@ -64,9 +67,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
-        <Button className="w-[240px] p-4 text-center" version="primary" href={activeHref}>
-          Выбрать программу
-        </Button>
+        <Button className="w-[240px] text-center" version="primary" {...button} href={activeHref} />
       </section>
     );
   },

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -6,7 +6,7 @@ export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', do
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
     iconClassName="mr-2.5 min-w-6 min-h-6"
-    textClassName="self-center font-light"
+    textClassName="self-center text-l-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}
     icon={icon}

package/src/components/LinkList/LinkList.tsx

@@ -8,7 +8,7 @@ export interface LinkListProps extends LinkListContent, UniBlockProps {}
 export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => {
   return (
     <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
-      <ul className="flex flex-col text-sm text-secondary-text p-0">
+      <ul className="flex flex-col text-s text-secondary-text p-0">
         {documents?.length ? renderLinkListItem(documents) : null}
       </ul>
     </BlockWrapper>

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -1,7 +1,6 @@
 { 
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "image": {
-    "src": "icon-phone.png",
     "format": "webp",
     "size": {
       "width": 529,

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -13,6 +13,16 @@ const image: Picture = {
   },
 };
 
+const qr: Picture = {
+  src: 'qr.png',
+  format: 'webp',
+  size: {
+    width: 92,
+    height: 92,
+  },
+  title: 'qr',
+};
+
 const listItems = [
   'Оплачивайте товары и услуги',
   'Следите за бонусным счетом онлайн',
@@ -45,11 +55,8 @@ export default {
         version="secondary"
         title="Обновлённое мобильное приложение «Урожай»"
         image={image}
-        qr={{
-          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
-          /* eslint-disable max-len */
-          src: 'data:image/png;base64,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',
-        }}
+        qr={qr}
+        headingType="h3"
         items={listItems}
         buttons={[
           {
@@ -68,11 +75,21 @@ export default {
         context={context}
         className="col-span-12"
         title="Обновлённое мобильное приложение «Урожай»"
-        qr={{
-          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
-          /* eslint-disable max-len */
-          src: 'data:image/png;base64,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',
-        }}
+        qr={qr}
+        headingType="h3"
+        items={listItems}
+        buttons={[button1, button2]}
+      />
+    </div>
+  ),
+  'without-image': (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-12"
+        title="Обновлённое мобильное приложение «Урожай»"
+        qr={qr}
+        headingType="h3"
         items={listItems}
         buttons={[button1, button2]}
       />
@@ -83,11 +100,7 @@ export default {
       <MobileAppTile
         context={context}
         className="col-span-4"
-        qr={{
-          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
-          /* eslint-disable max-len */
-          src: 'data:image/png;base64,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',
-        }}
+        qr={qr}
         buttons={[button1, button2]}
       />
     </div>

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -10,14 +10,14 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   ({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
     return (
       <div
-        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className}`}
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`}
       >
         {href ? (
           <div className="flex">
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
-            <a href={href} target="_blank" className="flex flex-col justify-center pl-3 font-sans">
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
               <div className="text-s font-medium mb-[3px]">{title}</div>
               <div className="text-s text-secondary-text">{description}</div>
             </a>

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -8,7 +8,6 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { MobileAppTileContent } from './MobileAppTileContent';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
@@ -28,25 +27,28 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     version = 'primary',
     items,
     image,
+    headingType = 'h4',
     ...rest
   }) => {
     const textColorClass = version === 'primary' ? 'text-primary-text' : '';
+    const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
 
     return (
       <BlockWrapper
         context={context}
-        className={`flex justify-between font-sans p-9 box-border relative
-        ${getTileRightPadding(className)} ${getTileMinHeight(className)}
+        className={`flex justify-between font-sans p-9 box-border relative min-h-[320px]
+        ${getTileMinHeight(className)}
         ${mobileAppStyleMap[version]}
         ${className}`}
         {...rest}
       >
         <BaseTile
           context={context}
+          className="z-[1]"
           title={
             title ? (
               <Heading
-                headingType="h4"
+                headingType={headingType}
                 as="h3"
                 title={title}
                 className={`whitespace-pre-wrap max-w-[509px] mb-6
@@ -56,22 +58,15 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-[30px] gap-4" />
+              <ButtonSection context={context} buttons={buttons} className="flex mt-8 gap-4" />
             ) : null
           }
         >
           <div className="flex flex-1 items-center">
-            {qr?.src && qr?.href && (
-              <a href={qr.href} target="_blank" aria-label={title}>
-                <img
-                  src={qr.src}
-                  alt={title}
-                  title={title}
-                  width="122"
-                  height="122"
-                  className="w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-4 rounded-md"
-                />
-              </a>
+            {qr?.src && (
+              <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
+                <Img image={qr} />
+              </div>
             )}
             {renderList(version, items)}
           </div>
@@ -90,11 +85,11 @@ const renderList = (version: string, items?: string[]) => {
   return items?.length ? (
     <List
       items={items}
-      itemClassName="base font-light mb-2 last:mb-0"
+      itemClassName="text-l-light mb-2 last:mb-0"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />
   ) : (
-    <span className="text-m text-secondary-text">
+    <span className="text-m-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение
     </span>
   );

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -3,26 +3,19 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title QR код
- */
-export interface QRCode {
-  /** @title QR код */
-  src?: string;
-  /** @title Ссылка */
-  href?: string;
-}
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Мобильное приложение
  */
 export type MobileAppTileContent = HeadlineCommonProps &
+  HeadingCommonProps &
   ButtonContent &
   ListContent &
   ImageContent & {
     // TODO: description для мобильной версии
-    qr?: QRCode;
+    qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
     version?: BlockVersion;

package/src/components/Navigation/Navigation.tsx

@@ -23,7 +23,7 @@ export const Navigation = JSX<NavigationProps>(
         }`}
         {...rest}
       >
-        <h2 className="font-medium text-xl-light m-0">{title}</h2>
+        <h2 className="text-xl font-medium m-0">{title}</h2>
         {buttons?.length ? (
           <div className="flex rounded-md overflow-hidden bg-white">
             {buttons

package/src/components/Navigation/NavigationItem.tsx

@@ -4,7 +4,7 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 export const NavigationItem = JSX<ButtonProps & { isActive: boolean }>(
   ({ className, text, onClick, href, target, isActive }) => (
     <a
-      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${
+      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-s border border-solid hover:text-primary-main ${
         className || ''
       } ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`}
       onClick={onClick}

package/src/components/PictureText/PictureText.tsx

@@ -57,18 +57,12 @@ function renderBenefit(benefit: PictureTextBenefit, i: number, version: string)
       ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit?.label ? (
-          <div
-            className={`font-medium text-xl-light m-0 ${
-              version === 'primary' ? 'text-primary-text' : ''
-            }`}
-          >
+          <div className={`text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`}>
             {benefit.label}
           </div>
         ) : null}
         {benefit?.description ? (
-          <div
-            className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
-          >
+          <div className={`text-s ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {benefit.description}
           </div>
         ) : null}

package/src/components/Placeholder/Placeholder.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import type { PlaceholderContent } from './PlaceholderContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import type { UniBlockProps } from '../../types';
@@ -30,7 +30,7 @@ export const Placeholder = JSX<PlaceholderProps>(
           description={description}
           headlineVersion={getTileHeadingType(className)}
         />
-        <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>
     );
   },

package/src/components/ProductBlock/ProductBlock.tsx

@@ -47,7 +47,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
           )
         : null}
       {breadcrumbs?.length ? (
-        <div className="text-xs mb-6">
+        <div className="text-xs-light mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(
             breadcrumbs.map((breadcrumb, i) => (
               <Breadcrumb

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -48,7 +48,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
             {items?.length ? (
               <List
-                className="mt-5 text-h6 font-light"
+                className="mt-5 text-h6"
                 items={items}
                 itemClassName="mb-[7px]"
                 version={version}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -31,7 +31,9 @@ export function renderBenefit(
       <div className="flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]">
         <div className={`text-h6 m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
         {benefit.description ? (
-          <div className={`text-m ${benefitDescStyleMap[version]}`}>{benefit.description}</div>
+          <div className={`text-m-light ${benefitDescStyleMap[version]}`}>
+            {benefit.description}
+          </div>
         ) : null}
       </div>
     </div>

package/src/components/ProductGallery/ProductGallery.tsx

@@ -99,7 +99,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
     : `text-l ${productBlockStyleMap[version].title}`;
   const btnDescClassName = isActiveBtn
     ? 'text-secondary-text text-m-title-xs mt-2.5'
-    : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
+    : `text-m mt-1.5 ${productBlockStyleMap[version].text}`;
 
   const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
 

package/src/components/ProductTile/ProductTile.tsx

@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m-light ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -108,5 +108,7 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return (
+    <div className={`text-m-light mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>
+  );
 }

package/src/components/PromoTile/PromoTile.tsx

@@ -59,7 +59,7 @@ export const PromoTile = JSX<PromoTileProps>(
           }
         >
           <div className="mt-1.5">
-            {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
+            {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
             <div className="text-l">{description}</div>
           </div>
         </BaseTile>

package/src/components/Recommendation/RecommendationCard.tsx

@@ -16,7 +16,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes, UniBlo
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     const tileTitle = title ? (
-      <Heading headingType="h5" as="h3" className="font-normal mb-3.5 z-10" title={title} />
+      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
     const tileImage = image?.src ? (
       <Img className="absolute bottom-0 right-0 m-0" image={image} />
@@ -36,7 +36,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           {description ? <Description className="mb-2" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]"
+              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
               items={items}
               version={version}
             />

package/src/components/SafeDepositRental/SafeDepositRental.example.json

@@ -0,0 +1,3 @@
+{
+  "title": "Аренда сейфовых ячеек"
+}

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useSafeDepositRental } from '../../hooks/useSafeDepositRental';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
@@ -10,10 +9,71 @@ export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlo
 
 const DEFAULT_DAYS = 26;
 
+const DATA = {
+  cities: [
+    {
+      city: 'Москва',
+      offices: [
+        {
+          office: 'МоскваОфис1',
+          rate: 1,
+        },
+        {
+          office: 'МоскваОфис2',
+          rate: 2,
+        },
+        {
+          office: 'МоскваОфис3',
+          rate: 3,
+        },
+      ],
+    },
+    {
+      city: 'Краснодар',
+      offices: [
+        {
+          office: 'КраснодарОфис1',
+          rate: 2,
+        },
+        {
+          office: 'КраснодарОфис2',
+          rate: 4,
+        },
+        {
+          office: 'КраснодарОфис3',
+          rate: 6,
+        },
+      ],
+    },
+  ],
+  cellDimensions: [
+    {
+      dimension: 'маленькая',
+    },
+    {
+      dimension: 'средняя',
+    },
+    {
+      dimension: 'большая',
+    },
+  ],
+  cellOptions: [
+    {
+      option: '125x225x375',
+    },
+    {
+      option: '200x300x400',
+    },
+    {
+      option: '300x400x500',
+    },
+  ],
+};
+
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ context, className = '', ...rest }) => {
     const [days, setDays] = context.useState(DEFAULT_DAYS);
-    const data = useSafeDepositRental(context.useAsyncData);
+    const data = DATA;
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
@@ -23,7 +83,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
           ) : null}
           <SafeDepositRentalTotal days={days} />
         </div>
-        <p className="text-button font-light text-secondary-text">
+        <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки
         </p>

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -22,7 +22,7 @@ export const SafeDepositRentalForm = ({
       {cellDimensions.length && cellOptions.length
         ? renderDimensionsOptions(cellDimensions, cellOptions, context)
         : null}
-      <span className="text-secondary-text font-light">Тип договора</span>
+      <span className="text-secondary-text text-l-light">Тип договора</span>
       <div className="flex justify-between items-center mt-5">
         {renderRadioButtons(context)}
         <Button text="Офисы на карте" version="primary" />
@@ -111,9 +111,9 @@ const renderSelect = (props: SelectProps) => {
 
   return (
     <div>
-      <span className="block font-light text-m mb-2">{label}</span>
+      <span className="block text-m-light mb-2">{label}</span>
       <Select
-        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        className="h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
         value={selected}
         onChange={(_) => setSelected(_)}
       >
@@ -132,7 +132,7 @@ export const renderRentalPeriod = (days, setDays) => {
 
   return (
     <div className="mb-6">
-      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <span className="block text-m-light mb-[3px]">Срок аренды</span>
       <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
     </div>
   );

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
 
-        <span className="font-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>
@@ -30,7 +30,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
 const renderTotal = (label, total, className = '') => {
   return (
     <div className={className}>
-      <span className="block font-light text-m mb-1">{label}</span>
+      <span className="block text-m-light mb-1">{label}</span>
       <span className="text-h3">{total}</span>
     </div>
   );

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

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
@@ -41,7 +41,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
@@ -68,7 +68,7 @@ const renderStepTitle =
       <div key={String(i)}>
         <div className="flex flex-row text-center relative">
           <div className="overflow-hidden">
-            {renderIconArea(size, version)}
+            {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
                 className={`min-h-8 h-full w-[2px] ${
@@ -81,7 +81,7 @@ const renderStepTitle =
             className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
           >
             {step.label ? (
-              <div className="font-medium text-m-title-xs m-0 text-left mb-1">{step.label}</div>
+              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
             ) : null}
             {step.description ? (
               <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>