@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -1,16 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Text } from '../../ui-kit/Text/Text';
 import { MediaButton } from './MediaButton';
+import type { ButtonSize } from './MediaButton';
+import { style } from '../../utils/style';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: Omit<LinkProps, 'text'>[];
+  media?: ButtonWithIconProps[];
+  buttonSize?: ButtonSize;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media }) => (
-  <div className={`flex gap-2 items-start justify-start ${className}`}>
-    {media?.map((_, index) => (
-      <MediaButton key={String(index)} {..._} />
-    ))}
-  </div>
-));
+export const SocialMedia = JSX<SocialMediaProps>(
+  ({ className = '', media, children, buttonSize }) => (
+    <div className="flex flex-col sm:flex-col-reverse gap-xs">
+      {children ? (
+        <Text size="text-s" font="font-light" color="text-secondary-text">
+          {children}
+        </Text>
+      ) : null}
+      <div className={style('flex gap-xs', className)}>
+        {media?.map((_, index) => (
+          <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
+        ))}
+      </div>
+    </div>
+  ),
+);

package/mobile/src/components/Footer/TextInformation.tsx

@@ -5,13 +5,13 @@ import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
   <div className={className}>
-    <div className="pt-4 xl:pt-5">
+    <div className="pt-lg">
       <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex justify-start items-start gap-5 pt-4">
+      <div className="flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/mobile/src/components/Footer/buttonSizeStyles.ts

@@ -0,0 +1,6 @@
+import { ButtonSize } from './MediaButton';
+
+export const buttonSizeStyles: { [key in ButtonSize]: string } = {
+  default: 'w-24 h-14',
+  stretched: 'flex-1 h-14',
+};

package/mobile/src/components/Footer/buttonStylesWithText.ts

@@ -1,10 +1,6 @@
 import { style } from '../../utils/style';
 import { ButtonSize } from './MediaButton';
-
-const buttonSizeStyles = {
-  default: 'w-24 h-14',
-  small: 'w-12 h-12',
-};
+import { buttonSizeStyles } from './buttonSizeStyles';
 
 export const buttonStylesWithText = (text: string, buttonSize: ButtonSize) =>
   text

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -14,7 +14,13 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-      <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
+      <Headline
+        className="mb-4"
+        title={title}
+        description={description}
+        headlineVersion="M"
+        isPadding={false}
+      />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>
   ),
@@ -42,15 +48,15 @@ const renderCalendar = (calendar: CalendarItem[]) => {
       <div className="flex w-full mb-3 text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
-      <div className="flex w-full">
+      <div className="flex gap-s w-full">
         {mappedCalendar.map((_, ind) => (
           <div
             key={`monthItem-${ind}`}
-            className="pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0"
+            className="pr-s border-r border-main-divider last:border-r-0 last:pr-0"
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s font-light text-primary-text mt-3">
+            <div className="text-s font-light text-primary-text mt-s">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

package/mobile/src/components/Header/Header.tsx

@@ -1,29 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Fallback } from '../../model/Fallback';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { projectSettings } from '../../ProjectSettings';
-import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { HeaderContent } from './HeaderContent';
+import type { HeaderProps } from './HeaderProps';
 import { HeaderTop } from './HeaderTop';
 
-export interface HeaderMobileProps extends HeaderContent, UniBlockProps {}
-
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
   transparent: 'transparent',
 };
 
-export const Header = JSX<HeaderMobileProps>(
-  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-    const fallback: Fallback | undefined = rest.options?.page?.fallback;
-    const { logo, internetBankUrl } = useSWRResource<SitemapData>(
-      projectSettings.SITEMAP || 'sitemap',
-      fallback,
-    );
+export const Header = JSX<HeaderProps>(
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], sitemap, ...rest }) => {
+    const { logo, internetBankUrl } = sitemap || {};
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>

package/mobile/src/components/Header/HeaderContent.ts

@@ -29,8 +29,6 @@ export type Logo = ImageContent & {
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
 export interface HeaderContent {
-  /** @hidden */
-  showSubMenu?: boolean;
   /** @hidden */
   bgColor?: BgColorVersion;
 }

package/mobile/src/components/Header/HeaderProps.ts

@@ -0,0 +1,9 @@
+import { RegionData } from '../../hooks/useLocation';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
+import type { HeaderContent } from './HeaderContent';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {
+  sitemap?: SitemapData;
+  location?: RegionData;
+}

package/mobile/src/components/Header/HeaderTop.tsx

@@ -50,7 +50,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
           ariaLabel="Войти"
           target="_blank"
           className={style(
-            'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            'p-s my-2xs text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
             BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
           )}
         >

package/mobile/src/components/Header/sitemap.wcms-resource.json

@@ -0,0 +1,144 @@
+{
+  "_schemaPath": "content/schemas/Карта Сайта.schema.json",
+  "officesLink": "https://www.rshb.ru/offices/moscow/",
+  "topItems": [
+    {
+      "items": [
+        {
+          "href": "/cards-credit",
+          "text": "Кредитные карты"
+        },
+        {
+          "href": "/cards-debit",
+          "text": "Дебетовые карты"
+        },
+        {
+          "href": "/credits",
+          "text": "Кредиты"
+        },
+        {
+          "href": "/deposits",
+          "text": "Вклады"
+        },
+        {
+          "href": "/investment",
+          "text": "Инвестиции"
+        },
+        {
+          "href": "/mortgage",
+          "text": "Ипотека"
+        },
+        {
+          "href": "/insurance",
+          "text": "Страхование"
+        },
+        {
+          "href": "/transfers",
+          "text": "Переводы"
+        },
+        {
+          "href": "/premium",
+          "text": "Премиум"
+        }
+      ],
+      "href": "/natural",
+      "text": "Частным клиентам",
+      "icon": { "icon": "ClientIcon", "iconVersion": "normal" }
+    },
+    {
+      "items": [
+        {
+          "text": "РКО",
+          "href": "/rco"
+        },
+        {
+          "text": "Кредиты",
+          "href": "/credits"
+        },
+        {
+          "text": "Депозиты",
+          "href": "/deposits"
+        },
+        {
+          "text": "Эквайринг",
+          "href": "/acquiring"
+        },
+        {
+          "text": "Банковские карты",
+          "href": "/cards"
+        },
+        {
+          "text": "ВЭД",
+          "href": "/ved"
+        },
+        {
+          "text": "Инвестиции",
+          "href": "/investment"
+        },
+        {
+          "text": "Обмен валюты",
+          "href": "/exchange"
+        }
+      ],
+      "text": "Бизнес клиентам",
+      "href": "/business",
+      "icon": { "icon": "BagIcon", "iconVersion": "normal" }
+    },
+    {
+      "items": [
+        {
+          "text": "Свое Родное",
+          "href": "https://svoe-rodnoe.ru/"
+        },
+        {
+          "text": "Свое Фермерство",
+          "href": "/ferm"
+        },
+        {
+          "text": "Свое Жилье",
+          "href": "/home"
+        },
+        {
+          "text": "Свое Село",
+          "href": "/selo"
+        },
+        {
+          "text": "Свое за Городом",
+          "href": "/gorod"
+        },
+        {
+          "text": "Свое Объявления",
+          "href": "/reklam"
+        }
+      ],
+      "text": "Экосистема Своё",
+      "href": "/svoe",
+      "icon": {
+        "icon": "GridIcon",
+        "iconVersion": "normal"
+      }
+    }
+  ],
+  "dispositions": [
+    {
+      "text": "Офисы",
+      "href": "#",
+      "icon": { "icon": "BankIcon" }
+    },
+    {
+      "text": "Банкоматы",
+      "href": "#",
+      "icon": { "icon": "AtmIcon" }
+    }
+  ],
+  "id": "6XGlupwIMfAfAca1Zm1X0",
+  "title": "Сайт РСХБ",
+  "slug": "sitemap",
+  "defaultLocation": "Москва",
+  "internetBankUrl": "https://google.com",
+  "logo": {
+    "image": {
+      "icon": "LogoIcon"
+    }
+  }
+}

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -1,34 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
-import { gapStyles } from './gapStyles';
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
 import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
 
 export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
 
 export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
-  ({
-    className = '',
-    gap = 'XS',
-    isPadding = false,
-    version = 'transparent',
-    isTheme = false,
-    ...rest
-  }) => (
-    <BlockWrapper
-      className={style('relative', 'grid grid-cols-12', gapStyles[gap], className)}
-      defaultPadding={isPadding ? 'p-6xl' : ''}
-      version={version}
-      isTheme={isTheme}
-      {...rest}
-    >
-      {renderChildren(rest)}
-    </BlockWrapper>
-  ),
+  (props) => <VerticalLayout {...props} />,
 );
 
-HorizontalLayout.childrenTypes = {
-  exclude: ['HorizontalLayout'],
-};
+HorizontalLayout.childrenTypes = [];

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -99,7 +99,7 @@ function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
+      className={`p-3xl min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
     >
       {slide?.icon ? (
         <Img

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -20,11 +20,11 @@ const investmentCellColorMap: Record<InvestmentCellColor, string> = {
 };
 
 const investmentCellSizeMap: Record<InvestmentCellSize, string> = {
-  XS: 'h-[40px]',
-  S: 'h-[68px]',
-  M: 'h-[102px]',
-  L: 'h-[136px]',
-  XL: 'h-[204px]',
+  XS: 'h-10',
+  S: 'h-16',
+  M: 'h-24',
+  L: 'h-32',
+  XL: 'h-52',
 };
 
 export interface InvestmentInfoProps extends InvestmentInfoContent, UniBlockProps {}

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -35,12 +35,12 @@ export const LinkDocs = JSX<LinkDocsProps>(
     return (
       <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
         <Headline
-          className="!p-0"
           title={title}
           description={description}
           align={align}
           headlineVersion="M"
           as="h2"
+          isPadding={false}
         />
         {documents?.length ? (
           <div
@@ -78,7 +78,8 @@ const renderLinkDocItem =
         role="listitem"
       >
         <LinkDocItem
-          {...docBlockDef}
+          text={docBlockDef?.text}
+          target={docBlockDef?.target}
           href={href}
           fileSize={fileSize}
           icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}

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

@@ -28,7 +28,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     version = 'primary',
     ...rest
   }) => {
-    const containerStyle = version === 'secondary' ? 'p-m min-w-[120px]' : 'min-w-[92px]';
+    const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
 
     return (
       <BlockWrapper

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

@@ -2,7 +2,7 @@ import { Text } from '../../ui-kit/Text/Text';
 
 export const renderDescription = (description?: string) =>
   description ? (
-    <div className="mb-5 pt-3xs sm:mb-0 sm:pt-0">
+    <div className="mb-lg pt-3xs">
       <Text size="text-xl" font-weight="light">
         {description}
       </Text>

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -51,23 +51,23 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
 
   return (
-    <div className={`flex flex-col font-sans bg-white w-full ${className}`}>
-      <div className="flex flex-col px-12 pt-12">
+    <div className={`flex flex-col font-sans w-full ${className}`}>
+      <div className="flex flex-col gap-m p-6xl pb-3xl">
         <div className="flex justify-between">
           <div className="text-h2">{name}</div>
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
-        <div className="flex text-l font-light pt-4">
+        <div className="flex text-l font-light">
           <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>
-        <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
+        <div className="flex">{nearbyOffices.map(renderNearbyOffice)}</div>
       </div>
-      <div className="flex justify-between pt-3xl">
+      <div className="flex justify-between">
         <div className="flex-grow h-full w-full overflow-hidden">
           {point ? <YandexMap points={[point]} className="h-full" /> : null}
         </div>
-        <div className="w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col">
+        <div className="w-[434px] min-w-[434px] p-6xl pt-0 flex flex-col">
           {workScheduleWeek.map(renderDay)}
         </div>
       </div>

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -14,19 +14,19 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={style('flex flex-col', className)} {...rest}>
-      {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
+    <BlockWrapper className={style('flex flex-col gap-lg', className)} {...rest}>
+      {title ? <Heading headingType="h5" title={title} /> : null}
       {servicesList?.length ? (
-        <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>
+        <ul className="list-none space-y-lg">{servicesList.map(renderListItems)}</ul>
       ) : null}
     </BlockWrapper>
   ),
 );
 
 const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
-  <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
+  <li key={`list_item_${String(i)}`} className="flex gap-s list-none ">
     {itemList.icon ? (
-      <Img className="mr-3 min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
+      <Img className="min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
     ) : null}
     {itemList.label ? (
       <Text size="text-l" font="font-light">

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -29,43 +29,42 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
+    <BlockWrapper
+      className={style('box-border text-left space-y-s', className)}
+      version={version}
+      {...rest}
+    >
+      <div className="w-full flex justify-between flex-row-reverse">
         {renderIconBlock(icon)}
-        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
+        {title ? <Heading headingType="h4" as="h3" title={title} /> : null}
       </div>
-      <div className="w-full">
+      <div className="w-full space-y-m">
         {__html ? renderDescriptionBlock(__html) : null}
         {renderBlock('Адрес', address, 'GeolocationIcon')}
         {renderBlock('Телефон', telephone, 'PhoneIcon')}
         {renderBlock('E-mail', email, 'MailIcon')}
-        {button?.text
-          ? renderButtonsSection([button], {
-              className: 'mb-6',
-            })
-          : null}
+        {button?.text ? renderButtonsSection([button]) : null}
       </div>
     </BlockWrapper>
   ),
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+  <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider pb-5 my-5">
+  <div className="border-b border-main-divider pb-5">
     <RichText __html={__html} />
   </div>
 );
 
 const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
-  <div className="flex mb-4">
-    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" />
-    <div className="flex flex-col first:pb-1">
+  <div className="flex gap-m">
+    <Icon iconVersion="black" name={iconName} width="24" height="24" />
+    <div className="flex flex-col">
       <Text size="text-m" font="font-light">
         {blockName}
       </Text>

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

@@ -45,10 +45,13 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
           unfoldedByDefault={isExpanded}
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={style('gap-5 [&>*]:p-0', foldableSectionStyles)}
+              className={style('gap-5', foldableSectionStyles)}
               isUnfolded={isUnfolded}
             >
-              {renderChildren(rest)}
+              {renderChildren({
+                ...rest,
+                extraProps: { className: 'w-full', padding: 'p-0' },
+              })}
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) =>
@@ -124,7 +127,7 @@ const renderPrimaryFoldButton = ({
   return (
     <button
       className={style(
-        'border-none bg-transparent px-0 flex justify-between items-center w-full group/button',
+        'border-none bg-transparent flex justify-between items-center w-full group/button',
         labelIcon?.icon ? 'py-xs' : 'py-lg',
       )}
       onClick={onToggle}

package/mobile/src/components/SafeDepositRental/{RenderRadioButtons.tsx → RadioButtons.tsx}

@@ -1,13 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
+import { style } from '../../utils/style';
 
-export const RenderRadioButtons = JSX(() => {
+interface RadioButtonsProps {
+  className: string;
+}
+
+export const RadioButtons = JSX(({ className }: RadioButtonsProps) => {
   const [selectedOption, setSelectedOption] = useState('option2');
   const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
-    <div>
+    <div className={style('order-4', className)}>
       <Radio
         className="mb-xs"
         name="contractType"

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -21,8 +21,8 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex justify-between gap-4 mb-6">
-      <div className="max-w-[396px] w-1/2">
+    <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}
           fieldValue="code"
@@ -32,7 +32,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
           label="Регион"
         />
       </div>
-      <div className="max-w-[396px] w-1/2">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={branches}
           fieldValue="branchCode"

package/mobile/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
 
 const ITEMS = ['От 1 дня', 'До 365 дней'];
 const MIN = 1;
@@ -11,8 +12,10 @@ interface RentalPeriodProps {
 }
 
 export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
-  <div className="mb-6">
-    <span className="block text-m font-light mb-1">Срок аренды</span>
+  <div className="order-1">
+    <Text size="text-m" font="font-light">
+      Срок аренды
+    </Text>
     <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
   </div>
 ));