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

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -11,6 +11,7 @@ import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
 import { renderInterestPayment } from './renderInterestPayment';
 import { renderMonthsInput } from './renderMonthsInput';
+import { renderRegistrationType } from './renderRegistrationType';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useDepositCalculatorParams } from './useDepositCalculatorParams';
 
@@ -28,10 +29,16 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       (_: boolean) => toggleIsMonthlyInterestPayment(_),
       [],
     );
+    const [isRemoteRegistration, toggleIsRemoteRegistration] = useState(false);
+    const handleIsRemoteRegistration = useCallback(
+      (_: boolean) => toggleIsRemoteRegistration(_),
+      [],
+    );
     const userInputParams = {
       moneyValue,
       monthsValue,
       isMonthlyInterestPayment,
+      isRemoteRegistration,
     };
     const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
 
@@ -55,16 +62,23 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             },
             handleMonthsValue,
           )}
+          <div className="mt-7 flex flex-col  gap-y-7">
+            {renderInterestPayment({
+              isMonthlyInterestPayment,
+              callback: handleIsMonthlyInterestPayment,
+              title: 'Выплата процентов',
+            })}
+            {renderRegistrationType({
+              isRemoteRegistration,
+              callback: handleIsRemoteRegistration,
+              title: 'Оформление',
+            })}
+          </div>
         </div>
-        <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />
+        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div className="w-full max-w-[350px]">
-          {income ? (
-            <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
-          ) : null}
-          {finalSum ? (
-            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-          ) : null}
-          {renderInterestPayment(isMonthlyInterestPayment, handleIsMonthlyInterestPayment)}
+          <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+          <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>

package/src/components/Calculator/constants.ts

@@ -3,8 +3,8 @@ import { BusinessDepositCalculatorSourceBookParams } from './useBusinessDepositC
 import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
 import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
-export const DEFAULT_MIN_SUM = 60000;
-export const DEFAULT_MAX_SUM = 2000000;
+export const DEFAULT_MIN_SUM = 30000;
+export const DEFAULT_MAX_SUM = 5000000;
 export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
 export const DEFAULT_MIN_MONTHS = 13;
 export const DEFAULT_MAX_MONTHS = 60;
@@ -25,12 +25,10 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookParams
   maxSum: DEFAULT_MAX_SUM,
   minMonths: DEFAULT_MIN_MONTHS,
   maxMonths: DEFAULT_MAX_MONTHS,
-  rateBottomRange: 12,
-  rateTopRange: 7,
+  rate: 0,
   isSalaryClient: true,
   isStateEmployee: true,
   isInsurance: true,
-  sumBorder: 999999,
 };
 
 export const DEFAULT_TRAVEL_MIN_SUM = 6000;
@@ -54,8 +52,9 @@ export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParam
   maxSum: 5000000,
   minMonths: 2,
   maxMonths: 120,
-  rate: 7,
+  rate: 0,
   isMonthlyInterestPayment: true,
+  isRemoteRegistration: true,
 };
 
 export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculatorSourceBookParams =
@@ -64,7 +63,7 @@ export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculat
     maxSum: 500000,
     minDays: BUSINESS_MIN_DAYS,
     maxDays: BUSINESS_MAX_DAYS,
-    rate: 6.6,
+    rate: 0,
     isMonthlyInterestPayment: true,
     isReplenished: false,
     isPartialWithdrawal: false,

package/src/components/Calculator/rangeHelpers.ts

@@ -21,4 +21,4 @@ export const checkRangeByKeys = <
   value: number,
   [minKey, maxKey]: [MinKey, MaxKey],
   sourceBookRow: T,
-): boolean => value >= sourceBookRow[minKey] && value < sourceBookRow[maxKey];
+): boolean => value >= sourceBookRow[minKey] && value <= sourceBookRow[maxKey];

package/src/components/Calculator/renderInterestPayment.tsx

@@ -1,3 +1,4 @@
+import { ListOrientation } from '../../model/ListOrientation';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
 
@@ -15,21 +16,32 @@ const depositTypeItems = [
   },
 ];
 
-export function renderInterestPayment(
-  isMonthlyInterestPayment: boolean,
-  callback?: (value: boolean) => void,
-  title?: string,
-) {
+interface InterestPaymentProps {
+  isMonthlyInterestPayment: boolean;
+  callback?: (value: boolean) => void;
+  title?: string;
+  orientation?: ListOrientation;
+}
+
+export function renderInterestPayment({
+  isMonthlyInterestPayment,
+  callback,
+  title,
+  orientation = 'horizontal',
+}: InterestPaymentProps) {
   return (
     <div>
       {title ? (
-        <Text color="text-secondary-text" font="font-light">
-          {title}
-        </Text>
+        <div className="mb-3">
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
       ) : null}
 
-      <div className="mt-3">
+      <div>
         <RadioButtonGroup
+          orientation={orientation}
           items={depositTypeItems}
           checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
           onChange={(text: string) => callback && callback(text === EVERY_MONTH)}

package/src/components/Calculator/renderPaymentType.tsx

@@ -0,0 +1,49 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+export const ANNUITY = 'annuity';
+export const DIFFERENTIAL = 'differential';
+
+const paymentTypeItems = [
+  {
+    id: ANNUITY,
+    text: 'Аннуитетный',
+  },
+  {
+    id: DIFFERENTIAL,
+    text: 'Дифференцированный',
+  },
+];
+
+interface PaymentTypeProps {
+  isAnnuity: boolean;
+  callback?: (value: boolean) => void;
+  title?: string;
+  orientation?: ListOrientation;
+}
+
+export function renderPaymentType({
+  isAnnuity,
+  callback,
+  title,
+  orientation = 'horizontal',
+}: PaymentTypeProps) {
+  return (
+    <div>
+      {title ? (
+        <div className="mb-3">
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      <RadioButtonGroup
+        orientation={orientation}
+        items={paymentTypeItems}
+        checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
+        onChange={(text: string) => callback && callback(text === ANNUITY)}
+      />
+    </div>
+  );
+}

package/src/components/Calculator/renderRegistrationType.tsx

@@ -0,0 +1,51 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+const REMOTE_REGISTRATION = 'remote';
+const OFFICE_REGISTRATION = 'office';
+
+const registrationTypeItems = [
+  {
+    id: OFFICE_REGISTRATION,
+    text: 'Офис Банка',
+  },
+  {
+    id: REMOTE_REGISTRATION,
+    text: 'Дистанционно',
+  },
+];
+
+interface RegistrationTypeProps {
+  isRemoteRegistration: boolean;
+  callback?: (value: boolean) => void;
+  title?: string;
+  orientation?: ListOrientation;
+}
+
+export function renderRegistrationType({
+  isRemoteRegistration,
+  callback,
+  title,
+  orientation = 'horizontal',
+}: RegistrationTypeProps) {
+  return (
+    <div>
+      {title ? (
+        <div className="mb-3">
+          <Text color="text-secondary-text" font="font-light">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      <div>
+        <RadioButtonGroup
+          orientation={orientation}
+          items={registrationTypeItems}
+          checkedItem={isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION}
+          onChange={(text: string) => callback && callback(text === REMOTE_REGISTRATION)}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -7,9 +7,9 @@ import {
 } from './constants';
 import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
-import type { CommonDepositParams } from './useDepositCalculatorParams';
 
-export interface BusinessCommonDepositParams extends CommonDepositParams {
+export interface BusinessCommonDepositParams {
+  isMonthlyInterestPayment: boolean;
   isReplenished: boolean;
   isPartialWithdrawal: boolean;
   isSmallBusiness: boolean;
@@ -34,6 +34,7 @@ export interface BusinessDepositCalculatorParams
   income?: number;
   finalSum?: number;
   isDisabledOperatingDeposit?: boolean;
+  isShowUnknownRate?: boolean;
 }
 
 export type BusinessDepositCalculatorData = {
@@ -65,7 +66,7 @@ export const useBusinessDepositCalculatorParams = (
       ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
       ...userInputParams,
       isDisabledOperatingDeposit,
-      rate: 0,
+      isShowUnknownRate: true,
     };
   }
   const businessDepositCalculatorSourceBookParams =

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -13,9 +13,7 @@ export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
   maxSum: number;
   minMonths: number;
   maxMonths: number;
-  rateBottomRange: number;
-  rateTopRange: number;
-  sumBorder: number;
+  rate: number;
 }
 
 export interface CreditCalculatorUserInputParams extends CommonCreditParams {
@@ -28,7 +26,6 @@ export interface CreditCalculatorParams
   extends CreditCalculatorSourceBookParams,
     CreditCalculatorUserInputParams {
   monthlyPayment: number;
-  finalRate: number;
 }
 
 export type CreditCalculatorData = {
@@ -53,9 +50,8 @@ export const useCreditCalculatorParams = (
       );
     }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
-  const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
-  const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
-  const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+  const { rate } = creditCalculatorSourceBookParams;
+  const monthlyPayment = getMonthlyPayment(rate, userInputParams);
   const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
 
   return {
@@ -63,7 +59,6 @@ export const useCreditCalculatorParams = (
     ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
     ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
     ...userInputParams,
-    finalRate,
     monthlyPayment,
   };
 };

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -4,6 +4,7 @@ import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonDepositParams {
   isMonthlyInterestPayment: boolean;
+  isRemoteRegistration: boolean;
 }
 
 export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
@@ -34,7 +35,8 @@ export const useDepositCalculatorParams = (
   userInputParams: DepositCalculatorUserInputParams,
   sourceBookDir?: string,
 ): DepositCalculatorParams => {
-  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+  const { isMonthlyInterestPayment, isRemoteRegistration, moneyValue, monthsValue } =
+    userInputParams;
 
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
@@ -44,12 +46,12 @@ export const useDepositCalculatorParams = (
     data?.rows?.find(
       (_) =>
         isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+        isRemoteRegistration === _.isRemoteRegistration &&
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
         checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _),
     ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;
-
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
   const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];

package/src/components/Catalog/Catalog.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/Footer/Contacts.tsx

@@ -15,7 +15,7 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
       <Button
         version="primary"
         className="mb-6 w-full"
-        href="/"
+        href="https://www.rshb.ru/feedback/question/"
         target="_blank"
         ariaLabel="Обратная связь"
         text="Обратная связь"

package/src/components/Footer/Sitemap.tsx

@@ -5,6 +5,7 @@ import type { LinkProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapDataProps, TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { joinPath } from '../../utils/url';
 
 export interface SitemapProps {
   className?: string;
@@ -12,7 +13,7 @@ export interface SitemapProps {
 }
 
 export const Sitemap = JSX<SitemapProps>(({ className = '', fallback }) => {
-  const link = useLink();
+  const link = useLink(true);
   const sitemap = useSWRResource<SitemapDataProps>(projectSettings.SITEMAP || 'sitemap', fallback);
 
   return (
@@ -36,24 +37,28 @@ const renderColumn = (menuItem: TopMenuItem & { onClick: () => void }, index: nu
         {text || `Раздел ${index}`}
       </a>
       {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {..._} index={i} />
+        <ColumnItem key={String(i)} {..._} basePath={href} index={i} />
       ))}
     </div>
   );
 };
 
 interface ColumnItemProps extends LinkProps {
+  basePath?: string;
   index?: number;
 }
 
-const ColumnItem = JSX<ColumnItemProps>(({ text, index, ...rest }) => {
-  const link = useLink();
+const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) => {
+  const isAnotherPortal =
+    projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
+
+  const link = useLink(isAnotherPortal);
   const { href, target, onClick } = link(rest);
 
   return (
     <a
       className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
-      href={href}
+      href={isAnotherPortal ? joinPath(basePath, href) : href}
       target={target || '_self'}
       onClick={onClick}
     >

package/src/components/Gallery/Gallery.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/MiniGallery/MiniGallery.ui.json

@@ -0,0 +1 @@
+{}

package/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/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -65,6 +65,7 @@ const BUTTONS: DefaultStep['button'][] = [
 const STEPS_WITH_BUTTONS_AND_ICONS: Step[] = STEPS_WITH_ICONS.map((step, i) => ({
   ...step,
   button: BUTTONS[i],
+  stepVersion: 'primary',
 }));
 
 const STEPS_WITH_LIST_PROPS: StepsBlockProps = {
@@ -75,6 +76,7 @@ const STEPS_WITH_LIST_PROPS: StepsBlockProps = {
 const STEPS_WITH_LIST_AND_DESC_PROPS: StepsBlockProps = {
   ...COMMON_PROPS,
   steps: STEPS_WITH_ICONS.map((step) => ({ ...step, items: ITEMS })),
+  stepVersion: 'secondary',
 };
 
 const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
@@ -84,6 +86,8 @@ const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
     button: { text: 'Оформить' },
   })),
   title: TITLE,
+  stepVersion: 'primary',
+  size: 'small',
 };
 
 export default {

package/src/components/StepsBlock/StepsBlock.mobile.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/src/components/StepsBlock/StepsBlock.tsx

@@ -1,18 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { joinList } from '../../utils/joinList';
-import { style } from '../../utils/style';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { renderStep } from './renderStep';
+import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+import { style } from '../../utils/style';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
-import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -26,13 +26,15 @@ export const StepsBlock = JSX<StepsBlockProps>(
     showLines = true,
     steps = [],
     button,
+    size = 'normal',
     version = 'primary',
+    stepVersion = 'gray',
     title,
     ...rest
   }) => {
     const shortGaps = steps.length > 3;
 
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
+    const styleMap = STEPS_BLOCK_STYLE;
 
     const lineOpacity = getLineOpacity(showLines);
     const paddingX = getPaddingX(steps.length);
@@ -49,14 +51,14 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {...rest}
       >
         {title ? (
-          <Heading headingType="h3" className="max-w-[752px] text-center mb-9" title={title} />
+          <Heading headingType="h4" className="max-w-[752px] text-center mb-9" title={title} />
         ) : null}
         {steps?.length ? (
           <div className="box-border">
             <div className={style('flex items-center', paddingX)}>
-              {joinList(<div className={style('h-0.5 w-full bg-secondary-light', lineOpacity)} />)(
-                steps.map(renderStepIcon(styleMap, version)),
-              )}
+              {joinList(
+                <div className={style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity)} />,
+              )(steps.map(renderStepIcon(styleMap, size, stepVersion)))}
             </div>
             <div
               className={style(
@@ -68,25 +70,30 @@ export const StepsBlock = JSX<StepsBlockProps>(
             </div>
           </div>
         ) : null}
-        {button?.text ? <Button className="mt-8 min-w-60" version="primary" {...button} /> : null}
+        {button?.text ? renderButtonsSection([button], { className: 'mt-8 min-w-60' }) : null}
       </BlockWrapper>
     );
   },
 );
 
 const renderStepIcon =
-  (styleMap: StyleType, version?: BlockVersion) =>
-  ({ icon }: Step, i: number) =>
-    (
-      <div key={String(i)} className="flex flex-col items-center text-center">
-        <div
-          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`}
-        >
-          {checkCanRenderIcon(icon) ? (
-            <Img image={getIconWithVersion(icon || {}, version)} width="48" height="48" asSVG />
-          ) : (
-            <span className={`text-h4 ${styleMap.iconText}`}>{i + 1}</span>
-          )}
-        </div>
-      </div>
+  (styleMap: StyleType, size: string, stepVersion: BlockVersion) =>
+  ({ icon }: Step, i: number) => {
+    const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
+
+    return (
+      <BlockWrapper
+        key={String(i)}
+        className={`${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`}
+        version={stepVersion}
+      >
+        {checkCanRenderIcon(icon) ? (
+          <Img image={getIconWithVersion(icon || {}, stepVersion)} width="48" height="48" asSVG />
+        ) : (
+          <span className={`text-h4 group-data-transparent:${styleMap.iconText} text-primary-text`}>
+            {i + 1}
+          </span>
+        )}
+      </BlockWrapper>
     );
+  };