@redneckz/wildless-cms-uni-blocks 0.12.6 → 0.12.7

package/mobile/src/components/Calculator/Calculator.tsx

@@ -74,8 +74,8 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
   const btnDescClassName = isActive
-    ? 'text-l-light text-white'
-    : `text-m-light text-secondary-text`;
+    ? 'text-l font-light text-white'
+    : `text-m font-light text-secondary-text`;
   const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
   const activeIconStyle = isActive ? 'white' : 'normal';

package/mobile/src/components/Calculator/CalculatorValueBlock.tsx

@@ -15,7 +15,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
     <div className={style('mb-7', className)}>
       {title ? (
-        <Text size="text-l-light" color="text-secondary-text">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
           {title}
         </Text>
       ) : null}

package/mobile/src/components/Calculator/Rate.tsx

@@ -23,7 +23,7 @@ export const Rate = JSX<RateProps>(
     fractionDigits = 2,
   }) => (
     <div>
-      <Text size="text-l-light" color="text-secondary-text">
+      <Text size="text-l" font="font-light" color="text-secondary-text">
         {title}
       </Text>
       <div className="relative">

package/mobile/src/components/Calculator/UnknownRate.tsx

@@ -9,14 +9,14 @@ export interface UnknownRateProps {
 
 export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
   <div>
-    <Text size="text-l-light" color="text-secondary-text">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
       {title}
     </Text>
     <div className="mt-1 pt-1 pl-5 pb-1.5">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
     <div className="w-[250px] mt-3.5">
-      <Paragraph size="text-xl-light" color="text-primary-text">
+      <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>
     </div>

package/mobile/src/components/Calculator/renderFootnote.tsx

@@ -2,7 +2,7 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 
 export const renderFootnote = (text?: string) =>
   text ? (
-    <Paragraph size="text-s-light" color="text-secondary-text">
+    <Paragraph size="text-s" font="font-light" color="text-secondary-text">
       {text}
     </Paragraph>
   ) : null;

package/mobile/src/components/Calculator/renderProposal.tsx

@@ -1,10 +1,15 @@
 import { Button } from '../../ui-kit/Button/Button';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../../ui-kit/Text/Text';
 
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
-      <div className="text-l-light">Ежемесячный платёж</div>
+      <div>
+        <Text size="text-l" font="font-light">
+          Ежемесячный платёж
+        </Text>
+      </div>
       <div className="text-h3 mb-3">{toLocalNumberFormat(2)(Math.round(monthlyPayment))} ₽</div>
       <Button className="mt-12 w-full" text="Отправить заявку" version="primary" href="#" />
     </div>

package/mobile/src/components/Carousel/Carousel.tsx

@@ -5,12 +5,11 @@ import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
-import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
+import { renderControlButtons } from './renderControlButtons';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -21,19 +20,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
     itemCount,
-    visibleItemCount,
+    visibleItemCount = 0,
     isBlur = true,
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
     showDots = false,
     isAlignCenter = false,
+    showArrows = true,
+    isGap = true,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
     const count = itemCount || childBlocks?.length;
 
-    const [activeIndex, setActiveIndex] = useState<number>(Math.floor((visibleItemCount || 0) / 2));
+    const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
     const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
     const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
 
@@ -51,7 +52,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
             snapAlign="snap-start"
-            gap={ITEMS_GAP}
+            gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
             {renderChildren({
@@ -65,17 +66,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
                 : renderBlock,
             })}
           </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            isBlur={isBlur}
-            arrowsPadded={arrowsPadded}
-            onScrollLeft={decreaseActiveIndex}
-            onScrollRight={increaseActiveIndex}
-            hasEdgeBlocks={isBankHistoryCarousel}
-            activeIndex={activeIndex}
-            itemCount={count}
-          />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
+          {renderControlButtons({
+            showArrows,
+            showDots,
+            scrollButtonsProps: {
+              scroll,
+              arrowsPadded,
+              isBlur,
+              onScrollLeft: decreaseActiveIndex,
+              onScrollRight: increaseActiveIndex,
+              hasEdgeBlocks: isBankHistoryCarousel,
+              activeIndex,
+              itemCount: count,
+            },
+            dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
+          })}
         </div>
       </BlockWrapper>
     );
@@ -100,16 +105,3 @@ const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default'
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';
-
-const renderDots = (
-  containerRef: { current: HTMLDivElement | null },
-  dotsActiveIndex: number,
-  itemCount: number | undefined,
-) => (
-  <SwipeListControlDots
-    containerRef={containerRef}
-    activeIndex={dotsActiveIndex}
-    dotCount={itemCount}
-    listType={'horizontal-list'}
-  />
-);

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -19,4 +19,8 @@ export type CarouselContent = UniBlockContent & {
   isPadding?: boolean;
   /** @title Выравнивать по центру  */
   isAlignCenter?: boolean;
+  /** @title отображение кнопок-стрелок*/
+  showArrows?: boolean;
+  /** @title отсупы между карточками*/
+  isGap?: boolean;
 };

package/mobile/src/components/Carousel/CarouselScrollButtons.tsx

@@ -4,7 +4,7 @@ import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowBu
 import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 
-interface CarouselScrollButtonsProps {
+export interface CarouselScrollButtonsProps {
   scroll: SwipeListScroll;
   arrowsPadded: boolean;
   isBlur: boolean;

package/mobile/src/components/Carousel/renderControlButtons.tsx

@@ -0,0 +1,24 @@
+import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
+import {
+  SwipeListControlDots,
+  SwipeListControlDotsProps,
+} from '../../ui-kit/SwipeListControl/SwipeListControlDots';
+
+interface renderControlButtonsProps {
+  showArrows: boolean;
+  showDots: boolean;
+  scrollButtonsProps: CarouselScrollButtonsProps;
+  dotsProps: SwipeListControlDotsProps;
+}
+
+export const renderControlButtons = ({
+  showArrows,
+  showDots,
+  scrollButtonsProps,
+  dotsProps,
+}: renderControlButtonsProps) => {
+  return [
+    showArrows ? <CarouselScrollButtons key="0" {...scrollButtonsProps} /> : null,
+    showDots ? <SwipeListControlDots key="1" {...dotsProps} listType="horizontal-list" /> : null,
+  ];
+};

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -3,83 +3,21 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
-interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {
-  blocksLength?: number;
-  activeIndex?: number;
-}
+interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {}
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
-  ({ title, description, blocksLength = 0, activeIndex, options }) => {
-    const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
-    const isActive = orderNumber === activeIndex;
-
-    return (
-      <BlockWrapper className="flex h-[485px]" defaultPadding="p-0">
-        {isActive ? (
-          <div className="relative flex items-center w-full">
-            <Headline
-              headlineVersion="M"
-              title={title}
-              description={description}
-              align="text-left"
-              className={style(
-                'absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue',
-                getActiveBlockPosition(orderNumber, blocksLength),
-                getBackgroundColor(orderNumber),
-              )}
-            />
-          </div>
-        ) : (
-          <div className="flex w-full items-center justify-center">
-            <div
-              className={style(
-                'flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]',
-                getBackgroundColor(orderNumber),
-              )}
-            >
-              <span className={getTextColor(orderNumber)}>{title}</span>
-            </div>
-          </div>
-        )}
-      </BlockWrapper>
-    );
-  },
+  ({ title, description, className }) => (
+    <BlockWrapper className={style(className)} defaultPadding="p-default">
+      <Headline
+        headlineVersion="S"
+        title={title}
+        description={description}
+        align="text-left"
+        className="text-primary-text"
+        isPadding={false}
+      />
+    </BlockWrapper>
+  ),
 );
-
-const getBackgroundColor = (orderNumber: number) => {
-  const division = orderNumber % 3;
-  switch (division) {
-    case 0:
-      return 'bg-primary-main';
-    case 1:
-      return 'bg-green-light';
-    case 2:
-      return 'bg-yellow-light';
-    default:
-      return 'bg-primary-main';
-  }
-};
-
-const getTextColor = (orderNumber: number) => {
-  const division = orderNumber % 3;
-  switch (division) {
-    case 1:
-      return 'gradient-color-text-on-yellow';
-    case 2:
-      return 'gradient-color-text-on-yellow';
-    default:
-      return 'gradient-color-text-on-green';
-  }
-};
-
-const getActiveBlockPosition = (orderNumber: number, blocksLength: number) => {
-  if (orderNumber === 0) {
-    return 'left-9';
-  } else if (orderNumber === blocksLength - 1) {
-    return 'right-9';
-  } else {
-    return '-left-[25px]';
-  }
-};

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -18,7 +18,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       className={style('flex w-full overflow-hidden justify-between', className)}
       {...rest}
     >
-      <div className="flex flex-col max-w-96 pr-m text-white text-xl-light">
+      <div className="flex flex-col max-w-96 pr-m text-white text-xl font-light">
         <Headline
           isPadding={false}
           title={title}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { Text } from '../../ui-kit/Text/Text';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -34,7 +35,11 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (
-        <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
+        <div className="mb-7 max-w-[613px] text-center">
+          <Text size="text-xl" font="font-light">
+            {subtitle}
+          </Text>
+        </div>
       ) : null}
       {button?.text ? (
         <Button className="py-4 px-9" version={button?.version} {...button}>

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -23,7 +23,7 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
             className="whitespace-pre-wrap text-h4 mb-5"
           />
           <div className="pl-11">
-            <Text size="text-m-light" align="text-left" color="text-secondary-text">
+            <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
@@ -34,7 +34,12 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
               <thead>
                 <tr>
                   <th>
-                    <Text size="text-m-light" align="text-left" color="text-secondary-text">
+                    <Text
+                      size="text-m"
+                      font="font-light"
+                      align="text-left"
+                      color="text-secondary-text"
+                    >
                       Валюта
                     </Text>
                   </th>

package/mobile/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderTableHeader = (title: string) => {
   return (
     <th className="pl-11">
-      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+      <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>
     </th>

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
 const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {

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

@@ -39,7 +39,7 @@ const renderContactsGroup = (item: ContactGroup, i: number) => (
 const renderContact = (item: ContactInfo, index: number) => (
   <div className="mb-4" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 
@@ -56,7 +56,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a className="text-xl-light text-primary-text no-underline" href={`mailto:${text}`}>
+        <a className="text-xl font-light text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

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

@@ -2,12 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
-import { textInformationTextSize } from './textInformationTextSize';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
   <div className={className}>
     <div className="pt-4 xl:pt-5">
-      <Text size={textInformationTextSize} color="text-secondary-text">
+      <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>

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

@@ -15,7 +15,7 @@ export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
 
     return (
       <a
-        className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
+        className={`text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
         href={href}
         target={target}
         onClick={onClick}

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

@@ -50,7 +50,7 @@ const renderCalendar = (calendar: CalendarItem[]) => {
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s-light text-primary-text mt-3">
+            <div className="text-s font-light text-primary-text mt-3">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

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

@@ -53,7 +53,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
             <a
               key={item.href || String(i)}
               className={style(
-                'text-l-light pb-4 hover:text-primary-main',
+                'text-l font-light pb-4 hover:text-primary-main',
                 item === activeItem ? 'text-primary-main' : '',
               )}
               {...link(linkProps)}

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

@@ -3,16 +3,6 @@
     "title": "Заголовок",
     "description": "Описание",
     "align": "center",
-    "bgColorHeadline": "transparent",
-    "headlineVersion": "M",
-    "image": {
-      "format": "webp",
-      "size": {
-        "width": 180,
-        "height": 180
-      },
-      "alt": "",
-      "title": ""
-    }
+    "headlineVersion": "M"
   }
 }

package/mobile/src/components/Headline/Headline.tsx

@@ -45,6 +45,7 @@ export const Headline = JSX<HeadlineProps>(
         {description ? (
           <Paragraph
             size={versionStyle.descriptionSize as TextSize}
+            font={versionStyle.descriptionWeight}
             align={align}
             {...descriptionStyle}
           >

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,14 +1,12 @@
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Заголовок
  */
 export type HeadlineContent = UniBlockContent &
-  HeadlineProps &
-  ImageContent & {
+  HeadlineProps & {
     /** @hidden */
     as?: HeadingTagType;
     /** @title Внутренний отступ блока */

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -1,43 +1,50 @@
 import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+import type { FontWeight, TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionWeight: FontWeight;
     descriptionStyle: string;
   }
 > = {
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionWeight: 'font-normal',
     descriptionStyle: 'mt-m',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-text',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l-light',
+    descriptionSize: 'text-l',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
 };

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

@@ -74,7 +74,7 @@ function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-light ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m font-light ${btnClassName}`}
     >
       {title}
     </button>

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

@@ -45,7 +45,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
   return (
     <BlockWrapper className={className} {...rest}>
-      <div className="container text-m-light">
+      <div className="container text-m font-light">
         {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">

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

@@ -2,9 +2,9 @@ import { List } from '../../ui-kit/List/List';
 
 export const renderList = (items?: string[]) => {
   return items?.length ? (
-    <List items={items} className="text-l-light mb-2 last:mb-0" />
+    <List items={items} className="text-l font-light mb-2 last:mb-0" />
   ) : (
-    <span className="text-m-light text-secondary-text">
+    <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение
     </span>
   );

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

@@ -57,7 +57,7 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
           <div className="text-h2">{name}</div>
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
-        <div className="flex text-l-light pt-4">
+        <div className="flex text-l font-light pt-4">
           <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>